JavaScript

Animate Counter (Number Roll-Up)

by @admin

9h ago

Apr 28, 2026

Public

Smoothly animates a number from a start value to an end value over a given duration using requestAnimationFrame. Supports a custom easing function (defaults to ease-out quad). Ideal for dashboard stat widgets, donation counters, and any UI where a bare static number would be less impactful.

JavaScript

function animateCounter(element, from, to, duration = 1000, easing = (t) => t * (2 - t)) {
  const start = performance.now();
  function update(now) {
    const t = Math.min((now - start) / duration, 1);
    element.textContent = Math.round(from + (to - from) * easing(t)).toLocaleString();
    if (t < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// Usage
const el = document.querySelector('#counter');
animateCounter(el, 0, 1_234_567, 2000);

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.

Get Started Free Sign In