Back to Blog

How to Add a Count Up Animation in Webflow

Tutorials
February 20, 2022

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.

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.

OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.