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

Webflow frameworks: Client-First vs Lumos
Documentation
Development

Client-First vs Lumos: Which Webflow framework to choose in 2025?

Client-First vs Lumos: Which Webflow framework to choose in 2025?
ChatGPT logo vs Midjourney
Documentation
AI

chatgpt-4o-vs-midjourney-ai-image-generation

chatgpt-4o-vs-midjourney-ai-image-generation
Visual representation of the Webflow AI Site Builder
Documentation
AI

Where is Webflow going with AI?

Where is Webflow going with AI?

Want to turn your website into your most valuable asset?

Contact us today