animating numbers counting Javascript

Created at 27-Oct-2021, By samar

animating numbers counting Javascript

In this article, we will see how to solve "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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.