Search by Queries/Bugs/Errors

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.

Answers 1

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

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress

animating numbers counting Javascript

Animated number counter with Javascript