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.
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.
Learn how to add a beautiful countdown to your Framer project. Add it to your project in seconds
In this article we will spotlight the best way to build a beautiful Instagram feed in your Framer sites. Built specifically for Framer and 100% free for small and personal sites.
Learn how to add a beautiful before and after image slider to your Framer projects. Customize all aspects including handles and labels directly in Framer.