Add an animated number counter (Webflow site)

What is an animated number counter?

An animated counter is the effect that animates the numbers when a user on your website arrives at the section. This animation will bring a lively style to your website. It will be more dynamic and pleasing to the eyes of 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.

How to add the effect to a Webflow site?

Not yet possible in 100% no-code, but we share the Javascript with you 😉 Follow the guide, quick, in only 3 steps.

Step 1: Add the code to your page

Copier-coller le code suivant dans le "Before <!-- fs-richtext-ignore --></body> tag" de la page en question de votre projet Webflow

<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 - of your project.

Step 3: Publish your site

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

Ps : find many other tips and trainings on Webflow in the blog of Digidop !