ba-block-cli/src/blocks/counter/counter.js

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    console.log('Counter init');

    // Scroll
    var numbers = document.querySelectorAll('.counter-section');
    if (numbers && numbers.length) {
        numbers.forEach(function(counter) {
            // Check the numbers
            var numbers = counter.querySelectorAll('.number');
            
            // On scroll event
            window.addEventListener("scroll", function() {
                let top = this.scrollY + (window.innerHeight / 2 + 360);
                if (numbers) {
                    var bodyRect = document.body.getBoundingClientRect();
                    numbers.forEach(function(number) {
                        var elemRect = number.getBoundingClientRect(),
                            offset = elemRect.top - bodyRect.top;
                        if (offset < top) {
                            animateValue(number);
                        }
                    });
                }
            });
        });
    }
});

/**
 * Animated counter
 * @param {DOMElement} number 
 * @param {Integer} start 
 * @param {Integer} duration 
 */
function animateValue(number, start = 0, duration = 1280) {
    if (number.classList.contains('active')) {
        return;
    }
    number.classList.add('active');

    // Set variables
    var end = number.getAttribute('data-number');
    if (end > 0) {
        var range = end - start,
            current = start,
            increment = (end > 500) ? Math.floor(end / 500) : (end > start ? 1 : -1),
            stepTime = Math.abs(Math.floor(duration / range));

        // Timer
        var timer = setInterval(function() {
            current += increment;
            number.innerHTML = current;
            if (current == end) {
                clearInterval(timer);
            }
        }, stepTime);
    }
}