February 20, 2022

How to Add a Count Up Animation in Webflow

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.

Back to Blogs

Overview 📚

Countup animations in web design provide an engaging way to present numerical information on a website. This animation gradually increases numeric values, creating a dynamic and visually interesting elementIt's a straightforward yet effective way to highlight achievements, statistics, or any data-driven content. Users find it visually appealing and it adds a touch of interactivity to the overall web experience.

Latest Update 🥰

We've updated this guide, and adding this to your project could not be more simple, it's just a small script + a few attributes. You can follow the guide below, or you can add this directly to any of your Webflow projects with our Boosters App, which provides a complete install and automated attributes system for you.

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 just using the plain text-element will work best.

2. Add atttributes to your text element

Add the following attributes to your text element as shown in the image and table below. You can see that these attributes set the target number (that we will count up too) as well as the speed and delay. Simply enter your desired number as the value next to the target attribute. This is the number that we will count up to when scrolled into view. If you require a prefix, like $ , %, £ you should add this as a seperate text element next to your CountUp element.

Attribute Name Attribute Value Description
fb-count true, false Simple and on/off method for the animation
fb-count-target eg. 1992 Specify the target number to count up too
fb-count-delay eg. 2000 Set the delay (ms) before the countup starts
fb-count-time eg. 1000 Specify the speed (ms) to complete the count.
3. Add the  script to your page code settings.

Most importantly we need to make sure that the script has been added into our before </body> tag. Copy the script below and add it to your custom code settings.

<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-countup@1.0/dist/countup.min.js"></script>
4. 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.