sinanisler logo

Numbers Animation, Counting Up

document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.numbers');
    const speed = 1000; // Duration of count in milliseconds

    elements.forEach(function(element) {
        const targetNumber = parseInt(element.textContent, 10);
        const increment = targetNumber / speed * 10; // Adjust this for a smoother animation

        let currentNumber = 0;
        const updateCount = function() {
            currentNumber += increment;
            if (currentNumber < targetNumber) {
                element.textContent = Math.ceil(currentNumber);
                setTimeout(updateCount, 10);
            } else {
                element.textContent = targetNumber;
            }
        };

        updateCount();
    });
});

See the Pen Untitled by sinanisler (@sinanisler) on CodePen.

Leave the first comment