Animating Numbers with requestAnimationFrame

Hi! 👋

Have you ever caught yourself staring at the rating change on Lichess after a hard meditation of chess puzzle ❓

Precisely, "hard meditation".

Anyway on their mobile app, that little number animation as your rating climbs from, say, 300 to 313 — or plummets from 308 to 299 — carries a strange sort of magic.

For you who didn't get my prior jest. On Lichess, the starting rating is 1500.

1500!

To hit either 300 or 308, we have to go on a legendary, historic, multi-day losing streak like an ultra plonker.

That is a disciplined, methodical, unyielding commitment to the wrong move.

In order to consistently, impeccably, and flawlessly play the absolute worst move every single time, we have to calculate the winning move first just to make sure we don't ACCIDENTALLY play it. It takes a true, visionary ultra plonker to systematically engineer the absolute worst outcome conceivable.

I hope that elaboration delivers its intention. To expound. Moving on.

The same thing happens when you log into a sleek SaaS (Software as a Service) dashboard — metrics tick upwards or downwards with an effortless, mechanical elegance.

Recently, while browsing through a few modern dashboard templates, I found myself wondering —

Hm. 🤔 Hm.

Naturally, my initial thought was to use setInterval. Run a timer every few milliseconds, add a bit to a count variable, update the DOM, and call it a day.

Except... it was a complete disaster. A comical one. I even bought a notebook to do the maths to redo my steps. My calculation was correct, but apparently modern browsers cap setInterval to a minimum threshold (around 4–10 ms). And under any sort of CPU load, the timer drifts wildly. Small number ranges jumped instantly, large number ranges lagged behind like a heavily loaded tractor. Well. All right.

So the solution is ditching timers entirely and tapping into requestAnimationFrame!

Unlike setInterval, requestAnimationFrame synchronises directly with the display's native refresh rate — whether 60Hz, 120Hz, or beyond. Instead of guessing how many milliseconds each step should take, I track the elapsed time against the target duration on every frame render. It makes animating numbers vastly smoother, more reliable, and automatically pauses if the user switches tabs, saving precious CPU cycles.

---

Demonstration

Hello, I'm a demonstration. ⬇️

From (number)

To (number)

Duration (ms)

EASE-IN

EASE-OUT

OUTPUT

Placeholder

⬆️ Try that!

Not just by clicking ▶️ RUN button, you can also start the animation by hitting Enter key if your cursor is focused on an input.

About the interface:

• From (number) input

  A starting number.

• To (number) input

  A final number.

• Duration (ms) input

  How long to animate in milliseconds.

• EASE-IN checkbox

  Applies ease-in cubic curve in the animation instead of linear motion.

  Ease-in = slow at the beginning then accelerate.

  Can be combined with EASE-OUT.

• EASE-OUT checkbox

  Applies ease-out cubic curve in the animation instead of linear motion.

  Ease-out = decelerate at almost the end.

  Can be combined with EASE-IN.

• RUN button

  To run the animation.

• CLEAR button

  To stop the animation and reset the output element state.

• OUTPUT

  The visual output.

---

Snippet

I've made the function to be modular so we can all enjoy it.

With explanations (comments).

/** * Factory function that creates an isolated number animator instance. * Encapsulates 'animationFrameId' within a private closure to prevent * global scope pollution and handle cleanup safely. */ function createNumberAnimator() { // Feature check: ensure the browser supports requestAnimationFrame if (!window.requestAnimationFrame) { throw new Error("'requestAnimationFrame' is unavailable!"); } // Holds the active frame request ID within this closure let animationFrameId = null; /** * Cancels any running animation frame and resets the ID back to null. */ const cancelFrame = () => { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } }; /** * Animates a numerical counter over a specified * duration using requestAnimationFrame. * * @param {number} startNumber - The initial starting number. * @param {number} endNumber - The final target number. * @param {number} totalDuration - Animation duration in milliseconds. * @param {Element} outputElm - Target DOM element to render the value. * @param {boolean} easeIn - Whether to apply an accelerating ease-in curve. * @param {boolean} easeOut - Whether to apply a decelerating ease-out curve. */ const animateNumber = ( startNumber, endNumber, totalDuration, outputElm, easeIn, easeOut ) => { // Cancel any existing animation on this instance before // starting a new run cancelFrame(); // Validate that the output target is a valid DOM element if (!(outputElm instanceof Element)) { throw new Error("'outputElm' is not a DOM element!"); } // Record the initial high-resolution timestamp const startTime = performance.now(); const delta = endNumber - startNumber; // Guard clause: set the text immediately and return if (delta === 0) { outputElm.innerHTML = startNumber; return; } /** * Calculates the eased progress multiplier (0 to 1) * based on boolean flags. * * @param {number} t - Linear progress fraction between 0 and 1. * @returns {number} The transformed progress value after * applying cubic easing. */ const getEasedProgress = (t) => { if (easeIn && easeOut) { // EASE-IN-OUT (cubic) return t < 0.5 ? 4 * Math.pow(t, 3) : 1 - Math.pow(-2 * t + 2, 3) / 2; } if (easeIn) { // EASE-IN (cubic) return Math.pow(t, 3); } if (easeOut) { // EASE-OUT (cubic) return 1 - Math.pow(1 - t, 3); } // Linear fallback: constant return t; }; /** * The frame-by-frame rendering loop passed to requestAnimationFrame. * * @param {DOMHighResTimeStamp} currentTime - High-resolution timestamp * provided by the browser. */ const step = (currentTime) => { const elapsed = currentTime - startTime; // Calculate linear progress fraction capped strictly at 1.0 (100%) const progress = Math.min(elapsed / totalDuration, 1); // Transform progress through the selected easing curve const easedProgress = getEasedProgress(progress); // Calculate current display integer based on eased progress const currentVal = Math.floor(startNumber + delta * easedProgress); if (progress < 1) { // Render current frame value and schedule the next frame outputElm.innerHTML = currentVal; animationFrameId = requestAnimationFrame(step); } else { // Animation complete outputElm.innerHTML = endNumber; animationFrameId = null; } }; // Kick off the initial frame request animationFrameId = requestAnimationFrame(step); }; // Public stop method alias const stop = cancelFrame; // Return public API methods return { animateNumber, stop }; }

Without comments.

function createNumberAnimator() { if (!window.requestAnimationFrame) { throw new Error("'requestAnimationFrame' is unavailable!"); } let animationFrameId = null; const cancelFrame = () => { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } }; const animateNumber = ( startNumber, endNumber, totalDuration, outputElm, easeIn, easeOut ) => { cancelFrame(); if (!(outputElm instanceof Element)) { throw new Error("'outputElm' is not a DOM element!"); } const startTime = performance.now(); const delta = endNumber - startNumber; if (delta === 0) { outputElm.innerHTML = startNumber; return; } const getEasedProgress = (t) => { if (easeIn && easeOut) { return t < 0.5 ? 4 * Math.pow(t, 3) : 1 - Math.pow(-2 * t + 2, 3) / 2; } if (easeIn) { return Math.pow(t, 3); } if (easeOut) { return 1 - Math.pow(1 - t, 3); } return t; }; const step = (currentTime) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / totalDuration, 1); const easedProgress = getEasedProgress(progress); const currentVal = Math.floor(startNumber + delta * easedProgress); if (progress < 1) { outputElm.innerHTML = currentVal; animationFrameId = requestAnimationFrame(step); } else { outputElm.innerHTML = endNumber; animationFrameId = null; } }; animationFrameId = requestAnimationFrame(step); }; const stop = cancelFrame; return { animateNumber, stop }; }

---

Usage

// Assign the factory function to a variable. Say, "animator". const animator = createNumberAnimator(); // 1. To animate, call the .animateNumber() animator.animateNumber(0, 5000, 2000, outputElm, false, true); // 2. To stop, call the .stop() animator.stop();

---

Related Function

For large numbers, to be readable, we can format them first.

Here's how we format the numbers.

So these lines for output:

// The gate outputElm.innerHTML = startNumber; // In progress outputElm.innerHTML = currentVal; // Finish line outputElm.innerHTML = endNumber;

Can be wrapped with the number formatter function.

// The gate outputElm.innerHTML = formatNumberWithRegex(startNumber); // In progress outputElm.innerHTML = formatNumberWithRegex(currentVal); // Finish line outputElm.innerHTML = formatNumberWithRegex(endNumber);

Include the number formatter function (formatNumberWithRegex) inside the factory function createNumberAnimator, and you're good to go.

As such:

---

Cheers. 🍺