Building an Animated Counter with Framer Motion

Learn how to get an animated counter to animate in response to React state changes.

🔗 LINKS

🕐 TIMESTAMPS
0:00 – Intro
0:38 – Rendering a column of digits
2:37 – Using a Spring that tracks state
4:06 – Using a transform to calculate y
5:47 – Shifting numbers past a threshold
7:52 – Using modulo to repeat numbers
11:13 – Adding tens and hundreds place
12:12 – Final demo

[tshddx]

It would be very cool to apply a very non-linear easing function so that, e.g. when the value=25 the “2” digit in the tens place is perfect centered vertically, when value=29 the “2” digit is moved up maybe 20% of the line height as if it’s resisting the pull to snap to “3” but still easily readable, and then when value=30 it does finally snap over to “3”.

[fylkasalitheias]

Really helpful indeed. Can't wait to see what other variations of this counter you can implement!

[tshddx]

Very cool! I’m old enough to remember when gas station meters worked like this. You also had to go into the gas station and give money to a human after you pumped the gas. Weird stuff.

[suhairhassan]

Your explanation is out of this world 🤩

[Reminiscer]

Your videos are very informative and the time and effort you put into them are much appreciated... Keep up the good work and Thank you!!

[soniamaklouf]

Hi Sam
Thanks for this video
Could you make a video on useAnimate hooks

[maxwebstudio]

Once again, awesome video ! Thank you !
One question : How do you actually measure an element and then drag the measurement on the screen ? Looks like you are using Cleanshot or Pixelsnap, but i cannot find how to keep and drag a measure on the screen.... Thanks in advance...

[tuanauduong]

Could you create a video to share your VS Code setup? Vim, snippets like range... :D

[TenzDelek]

shouldnt have skip my math class back then

[OnlyJavascript]

this one is awesome...i don't know if you gonna read my comment and approve my request. I would be so much happy, if you make a tut on responsive megamenu with framer motion animation, tailwind and react. Thanks in advance.

[MrDermases]

What is the measurement tool he is using called? Is it mac / windows specific?

[DIN_A]

Whats with the thumbnail… ypu DJing :)