Skip to main content

animating numbers counting Javascript

You can animate numbers counting in Javascript. Here we have a script which helps you to animate number counts using the target element, starting number, target number with the specified speed.

  • Animated number counter with Javascript

    HTML element to display counter animation

    <span id="counter"></span>

    Counter animation script

    <script type="text/javascript">
    const counterAnim = (qSelector, start = 0, end, duration = 1000) => {
        const target = document.querySelector(qSelector);
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            target.innerText = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    };
    
    counterAnim("#counter", 0, 100, 5500);
    </script>

     

    This code snippet used to display the counter animation using javascript. Here we have a function counterAnim() and You have to pass the targert elemet, starting animation counter number, target animation counter number and the speed of counter. Simply copy/paste code and you can display counter in your browser.

  • Back to code snippet queries related javascript