Animated Counter

Count-up animation with copy-ready snippet.

Target number

Duration (ms)

How to add to your site

function animateNumber(el, target, duration = 2000) {
  const start = performance.now();
  function frame(now) {
    const t = Math.min(1, (now - start) / duration);
    const eased = 1 - Math.pow(1 - t, 3);
    el.textContent = Math.floor(eased * target).toLocaleString();
    if (t < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

Animated count-up effect, useful for marketing pages, dashboards, or any "we have served X customers" moment. Ease-out cubic for a natural settle. Snippet you can drop into any page.

About

Pick a target number and duration. The page animates the count-up. Includes a 10-line JavaScript snippet you can drop into any site.

How to use

Pick target and duration.

FAQ

Does this respect reduced-motion?+

The example snippet doesn't. For production use, wrap with a window.matchMedia('(prefers-reduced-motion: reduce)') check and snap to the final value.