How to animate a number with CountUp on Webflow

Related articles:

• How to Place a Citation div In a Running Text P in Webflow

‍

We will be using Counter-Up2 to create this effect. Counter-Up2 is a lightweight zero-dependency module that comes after the extremely popular counter-up. Although counter-Up2 is much lighter than the first version, most tutorials are still including the first counter-up, even though it is not the recommended option. That’s why we’re here. To make your website function better and faster.

View the original repository here.

To get this animation working, follow the steps listed below.

‍

Add a text element to your page.

This can be any text element. In our case, we are adding a plain text element.

• Give this element the class name 'counter', as seen below.
• Add the number you would like to see once the counter is finished. For this example, I used 1,000,000.

‍

Add the script in the project settings.

Add the following script to the page in the custom code section in page settings before closing the body tag.

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<script>
//Init countup 
const counterUp = window.counterUp.default

//Logic for intersection observer to init countup on scroll 
const callback = entries => {
    entries.forEach(entry => {
        const el = entry.target
        if (entry.isIntersecting) {
            counterUp(el, {
                duration: 2000, //Duration of animation
                delay: 100, //Animation delay 
            })
        }
    })
}

//Init intersection observer for countup el
const IO = new IntersectionObserver(callback, { threshold: 1 })
const el = document.querySelector('.counter');
IO.Observe(el)
 </script>
 

Ok, let’s go over this code.

First, we want to add the Counter-Up2 CDN to our project.

Next, we want the animation to play when an element is scrolled into view. Most tutorials just bring in another library for that. The problem with that is website performance. And that’s a big problem for us.

So, we use the Intersection Observer API. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. In other words, detect when an element is scrolled into view. Read more about the Intersection Observer API here.

Although it is a bit more code, it improves the website's performance, as we don't have to bring in another library.

‍

What if I want to animate multiple elements?

No problem. To animate multiple elements with the class ‘counter', skip the step above and add the code seen below instead. Remember, each element must have the same class name 'counter’.

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<script>
//Init countup 
const counterUp = window.counterUp.default

//Logic for intersection observer to init countup on scroll 
const callback = entries => {
    entries.forEach(entry => {
        const el = entry.target
        if (entry.isIntersecting) {
            counterUp(el, {
                duration: 2000, //Duration of animation
                delay: 100, //Animation delay 
            })
        }
    })
}

//Init intersection observer for countup el
const IO = new IntersectionObserver(callback, { threshold: 1 })
const el = document.querySelectorAll('.counter');
el.forEach(el => {
    IO.observe(el);
})
 </script>
 

The difference between this code, and the code in the previous step, is that here, we loop through every element with the class name 'counter' with a forEach loop and add the Intersection Observer to every element.

‍

And there you have it! Publish your site and check the live domain to see the counter in action.

Keep an eye on our blog page for more tricks to take your Webflow website to the next level.

‍