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

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
Deepseek vs ChatGPT
News
AI

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

Want to turn your website into your most valuable asset?

Contact us today