Add a scrolling animation from X to X number

Tools:

Introduction

Adding a number scroll from one value to another in a website can have several uses:

Attracting attention : Movement naturally attracts the human eye. A scroll can therefore be used to highlight specific information or announcement that site designers want visitors to see.
Dynamic aspect : Scrolling can make a website look dynamic and modern, although this effect depends a lot on current design trends.
Navigation : In some cases, scrolling can be used as a navigation element, guiding users to different sections of a website or to external links.

However, there are also disadvantages to using text scrolling:

Readability : Text in motion can be difficult for some users to read.
Accessibility : Scrolling can cause problems for users with disabilities, especially those who use screen readers.
Compatibility : Not all browsers and devices handle animations well, which can cause display issues.
Distraction : If misused, a scrolling animation can distract more than it informs, especially if other elements of the site are also in motion.

If you are considering adding text scrolling to your website, it is essential to weigh the pros and cons, and to always test the functionality on different devices and browsers to ensure a good user experience.

Here's how to add it to your Webflow site

‍

Add this script to the URL <head>of your page

Remember to replace the variable {your-id} with the id used in the previous step

 <script>
const DUREE = 60000; // Durée totale de l'animation en millisecondes (1 minute)
const VALEUR_FINALE = 12000000; // La valeur cible

const INTERVALLE = 10; // en millisecondes
const AUGMENTATION = VALEUR_FINALE / (DUREE / INTERVALLE);

let valeurActuelle = 1000000;
const element = document.getElementById("{votre-id}");

const interval = setInterval(() => {
    valeurActuelle += AUGMENTATION;

    // Pour rendre l'animation des centaines dynamique
    const animationCentaines = Math.floor(Math.random() * 100);

    let valeurAffichee = valeurActuelle + animationCentaines;

    // Si on dépasse la valeur finale, on arrête l'interval
    if (valeurActuelle >= VALEUR_FINALE) {
        clearInterval(interval);
        valeurAffichee = VALEUR_FINALE;
    }

    // Formatage avec une virgule comme séparateur de milliers et ajout du symbole $
    element.textContent = '$' + Math.round(valeurAffichee).toLocaleString('en-US');
    
}, INTERVALLE);
</script>

‍

Customize the code for a result adapted to your needs

Change the duration

const DURATION = 60000;

Represents the total duration of the animation in milliseconds (60 seconds or 1 minute in this example).

Change the final value

const FINAL_VALUE = 12000000;

Your target or final value that the animation should reach in milliseconds.

Change the interval

const INTERVAL = 10;

Represents how often the current value will be updated, in milliseconds.

Change the starting value

let CurrentValue = 1000000;

Set the current value to 1,000,000 (starting value).

Bonus

const animationHundreds = Math.floor (Math.random () * 100);

Generate a random number between 0 and 99. Used to give a dynamic animation effect to hundreds when displayed.

element.textContent = '$'+ Math.round (DisplayValue) .toLocaleString ('en-US');

US formatting with a comma as a thousands separator and adding the $ symbol. To get a result in € and an FR format you can use the following code

element.textContent = '€'+ Math.round (DisplayValue) .toLocaleString ('fr-FR');

Simply remove this part of the code to remove the formatting and unity!

‍

Publish and you're done

Sandro D.

Updated on

8/10/2024

Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)