Animate a number counting up from Zero in Webflow with a few simple steps. When a user scroll the element in view the count up will start.
Counter-Up is a jQuery plugin that helps you animate numbers counting up from zero.
All you have to do is add a class and a small script snippet. Counting animation will be triggered when the element is in view.
View the Original Repository here, and codepen example by Webflow Community Leader Ezra Siton
To add this into your project, follow the simple steps below and be sure to add the small script into your project or page settings.
Add a text element to your page where you would like the number to be rendered. This can be any type of text-element, but in most cases using the plain text-element will work best.
Add the class 'counterup' to the newly added text element. You can add as many text elements as you would like, and you can add the 'counterup' as a combo-class if preferred.
Simply enter your desired number on the Counter-Up text element.
This is the number that we will count up to when scrolled into view.
Counter-Up will only render numbers, you can add a comma to display numbers like this - 3,342
If you require a prefix, like $ , %, £ you should add this as a seperate text element next to your Counter-Up element.
Most importantly we need to make sure that the custom code scripts have been added into our before </body> tag.
When this element is scrolled into view you should now see it counting up from zero to your entered number.