Template 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>