Instructions

<script>
            window.addEventListener("load", function() {
                const counters = document.querySelectorAll("[data-count]");
 
                const observer = new IntersectionObserver( (entries, observer) => {
                    entries.forEach(entry => {
                        if (!entry.isIntersecting)
                            return;
 
                        const el = entry.target;
 
                        // Remove the thousand separator dots, then convert to a number.
                        const target = parseInt(el.getAttribute("data-count").replace(/\./g, ""), 10);
 
                        const duration = 3000;
                        // in ms
                        const frameRate = 60;
                        const totalFrames = Math.round(duration / (1000 / frameRate));
                        let frame = 0;
 
                        const count = () => {
                            frame++;
                            const progress = frame / totalFrames;
                            const current = Math.round(target * progress);
 
                            // Format the number with thousand separators
                            el.innerText = current.toLocaleString("id-ID");
 
                            if (frame < totalFrames) {
                                requestAnimationFrame(count);
                            } else {
                                el.innerText = target.toLocaleString("id-ID");
                            }
                        }
                        ;
 
                        requestAnimationFrame(count);
                        observer.unobserve(el);
                    }
                    );
                }
                ,{
                    threshold: 0.6
                });
 
                counters.forEach(el => observer.observe(el));
            });
        </script>

This JavaScript code creates a smooth counting animation that starts when the element becomes visible in the viewport. It’s commonly used for animated statistics or number counters on scroll.

This script animates numbers when they scroll into view. Each number element must include a data-count attribute that stores the final value you want to count up to. When the element becomes visible in the viewport, the script gradually increases the number from 0 to the target value, creating a smooth counting effect.