How to Add a Count Up Animation in Webflow

Overview 📚

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.

{{ Template "gist" "text:Copy Script" "id:2fcdb7861cc5ff9875fb17a95f191ed9" }}

Instructions ✍️

1. Add a text element to your page (for the counter)

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.

‍

2. Add the class .counterup to your text element

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.

3. Set your target number that you want to count up too.

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.

‍

4. Add the custom script to your page code settings.

Most importantly we need to make sure that the custom code scripts have been added into our before </body> tag.

{{ Template "gist" "text:Copy Script" "id:2fcdb7861cc5ff9875fb17a95f191ed9" }}

‍

5. Publish and check staging / live domain.

When this element is scrolled into view you should now see it counting up from zero to your entered number.