Add an animated number counter (Webflow)

Tutorial
March 20, 2023
3 min
Custom code in Webflow and CSS class "counterup"
Key points

What is an animated number counter?

An animated counter is the effect that animates the numbers when a user visits your website and reaches the section. This animation will bring a lively style to your website, making it more dynamic and visually appealing to your users.

Below, you can see a GIF of an animated counter that appears on the page when users first access the relevant section of your website.

Animation with dynamic numbers on a Webflow page
Counter animation made in Webflow

How to add the effect to a Webflow site?

Not entirely possible with 100% no-code yet, but we’re sharing the JavaScript with you 😉 Follow this quick guide in just 3 simple steps.

Step 1: Add the code to your page

Copy and paste the following code into the "Before <!-- fs-richtext-ignore --></body> tag" of the relevant page in your Webflow project.

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>
<script>
jQuery(document).ready(function( $ ) {
  $('.counterup').counterUp({
    delay: 100, // the delay time in ms
    time: 2000 // the speed time in ms
  });
});
</script>

Step 2: Create a CSS class

Create a CSS class: counterup and assign it to the HTML element - text block or paragraph - in your project.

Custom code and CSS configuration in Webflow

Step 3: Publish your site

Publish your site and test the effect live! (The JavaScript code only works when the site is published)

P.S.: Find plenty of other tips and training on Webflow in the Digidop blog!

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today