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.

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 CodeIgniter Css Html Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress

animating numbers counting Javascript

Animated number counter with Javascript

Random Code Snippet Queries: Javascript

Share on social media