Kaunter Beranimasi

/**
 * Counts an element up from 0 to its data-target value.
 * Respects prefers-reduced-motion by jumping straight to the end.
 */
export function animateCounter(el, { duration = 1500 } = {}) {
  const target = Number(el.dataset.target);
  const format = new Intl.NumberFormat(document.documentElement.lang || undefined);
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (reduceMotion || duration <= 0) {
    el.textContent = format.format(target);
    return;
  }

  const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
  const start = performance.now();

  function tick(now) {
    const progress = Math.min((now - start) / duration, 1);
    el.textContent = format.format(Math.round(target * easeOutCubic(progress)));
    if (progress < 1) requestAnimationFrame(tick);
  }

  requestAnimationFrame(tick);
}

/** Start each counter the first time it scrolls into view. */
export function animateCountersOnScroll(selector = "[data-target]") {
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      animateCounter(entry.target);
      observer.unobserve(entry.target); // only once
    }
  }, { threshold: 0.5 });

  document.querySelectorAll(selector).forEach((el) => observer.observe(el));
}