Numbers Counter

<!-- Simply add the js-numbers-counter class and the desired value in data-number to each text tag. -->
<h2 class="js-numbers-counter" data-number="25000">0</h2>

<span class="js-numbers-counter" data-number="167">0</span>

// Auxiliary variable to ensure that the error alert only pops up once
let missingDataAlertShown = false;

// Playing a running numbers animation
document.querySelectorAll('.js-numbers-counter').forEach(function(el) {
    running_numbers(el);
});

function running_numbers(el) {
    const dataNumber = el.getAttribute('data-number');
    
    if (!dataNumber) {
        if (!missingDataAlertShown) {
            alert("System error: 'data-number' not defined in one or more of the running number elements!");
            missingDataAlertShown = true;
        }
        console.error("Y-Tools: Missing 'data-number' attribute on element:", el);
        el.textContent = "0";
        return;
    }

    const target = parseInt(dataNumber.replace(/,/g, ''), 10);
    
    if (isNaN(target)) {
        console.error("Y-Tools: The 'data-number' value is not a valid number:", dataNumber);
        el.textContent = "0";
        return;
    }

    const duration = 3000;
    const start = performance.now();

    function update(currentTime) {
        const elapsed = currentTime - start;
        const progress = Math.min(elapsed / duration, 1);
        
        const ease = 0.5 - Math.cos(progress * Math.PI) / 2;
        const currentNum = Math.ceil(ease * target);
        
        el.textContent = currentNum.toLocaleString();

        if (progress < 1) {
            requestAnimationFrame(update);
        } else {
            el.textContent = target.toLocaleString();
        }
    }

    requestAnimationFrame(update);
}