requestAnimationFrame: Browser Support, Use Cases, Issues

What is requestAnimationFrame?

requestAnimationFrame is a method on the WHATWG AnimationFrameProvider mixin, exposed on the global window. It accepts a callback and returns an integer ID. The browser invokes the callback once, just before the next paint, and passes a high-resolution timestamp to the callback so animations can scale by elapsed time.

Which browsers does requestAnimationFrame support?

requestAnimationFrame is supported unprefixed in every modern engine. Older Chrome and Firefox builds shipped vendor-prefixed variants, and Opera Mini still has no support at all.

How does requestAnimationFrame work?

requestAnimationFrame plugs into the browser's rendering loop. The engine batches your callback with style, layout, and paint so the work lands in the same frame the browser was about to render anyway.

• Queue the callback: Calling requestAnimationFrame(cb) appends cb to the document's animation frame callbacks list and returns a numeric handle.
• Wait for the next paint: The browser's event loop reaches the rendering steps once it is ready to paint, which usually happens at the display refresh rate.
• Run all callbacks: Every queued callback runs in order with the same DOMHighResTimeStamp argument, so any DOM reads and writes inside them target one consistent frame.
• Style, layout, paint: The browser then runs style recalculation, layout, and paint, and any property mutations from the callback land in this frame instead of the next one.
• Cancel or re-schedule: The queue is now empty. Call requestAnimationFrame again from inside the callback to keep animating, or call cancelAnimationFrame(handle) to drop a pending entry.

Use the timestamp argument to scale motion by elapsed time. Without it, animations run twice as fast on a 120Hz ProMotion iPad as they do on a 60Hz monitor.

// Detect support and start a smooth, time-scaled animation.
if (typeof window.requestAnimationFrame === "function") {
  const box = document.getElementById("box");
  let firstFrame;

  function step(now) {
    if (firstFrame === undefined) firstFrame = now;
    const elapsed = now - firstFrame;
    // 0.2 px per millisecond, capped at 300 px so it stops cleanly.
    const x = Math.min(elapsed * 0.2, 300);
    box.style.transform = "translateX(" + x + "px)";
    if (x < 300) requestAnimationFrame(step);
  }

  const rafId = requestAnimationFrame(step);
  // Cancel before unloading the page so the queue stays clean.
  window.addEventListener("beforeunload", () => cancelAnimationFrame(rafId));
} else {
  console.log("requestAnimationFrame is not supported in this browser.");
}

What are the use cases of requestAnimationFrame?

requestAnimationFrame is the default loop for any work that has to stay in step with the screen. The most common production patterns are below.

• Canvas and WebGL rendering: Game engines like Phaser, PixiJS, and Three.js drive their render loop from requestAnimationFrame so the GPU work matches the display refresh rate.
• Smooth DOM animations: Libraries like GSAP, Framer Motion, and Motion One use it to mutate transform and opacity once per frame, which avoids layout thrash and keeps motion at 60 frames per second.
• Scroll-driven effects: Apps like Linear and Notion debounce scroll handlers behind requestAnimationFrame so heavy work runs at most once per paint, not on every wheel event.
• Force a layout boundary: A single requestAnimationFrame after a class change lets the browser commit the previous style change so the next change actually triggers a CSS transition.
• Frame-rate measurement: Performance dashboards in apps like Figma compute the delta between two timestamps to estimate FPS without touching the deprecated chrome.fps API.
• Idle work batching: Pair requestAnimationFrame with requestIdleCallback to start work on the next paint and yield back if the frame budget is already burned.

What are the known issues with requestAnimationFrame?

requestAnimationFrame is well supported, but the corner cases bite production code in predictable ways.

• High-refresh-rate drift: A callback that moves an element by a fixed pixel count per call doubles its speed on a 120Hz iPad and triples on a 144Hz monitor. Always scale by the timestamp delta.
• Background tab freeze: Hidden tabs pause the queue, so timers built on requestAnimationFrame stop ticking until the tab is visible. Pair it with the Page Visibility API or fall back to setTimeout for elapsed-time math.
• Leaked loops: Forgetting to call cancelAnimationFrame on unmount keeps the loop alive after the React component or Vue instance is gone, which leaks memory and burns CPU on dead nodes.
• Forced reflow inside the callback: Reading offsetHeight or getBoundingClientRect after a style mutation in the same callback forces a synchronous layout. Batch reads first, writes second, or split work across two frames.
• Long-task violations: Chrome logs "[Violation] requestAnimationFrame handler took N ms" when a single callback runs longer than 50 milliseconds, which means the next frame missed its deadline. Profile and split the work.
• Worker support is partial: DedicatedWorkerGlobalScope.requestAnimationFrame paired with OffscreenCanvas only ships in Chromium browsers. In my experience, Safari and Firefox still need the canvas pipeline on the main thread, so OffscreenCanvas-only ports break in production until shipped behind a UA check.

Citations

All requestAnimationFrame version numbers and platform notes in this guide come from these primary sources:

• WHATWG HTML Living Standard - AnimationFrameProvider: html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#animation-frames
• MDN - Window.requestAnimationFrame() method: developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
• MDN - DedicatedWorkerGlobalScope.requestAnimationFrame: developer.mozilla.org/en-US/docs/Web/API/DedicatedWorkerGlobalScope/requestAnimationFrame
• MDN - cancelAnimationFrame() method: developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame
• MDN - Page Visibility API: developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
• Chrome Platform Status - requestAnimationFrame: chromestatus.com/feature/5036906952818688
• Chrome for Developers - High-refresh-rate animations: developer.chrome.com/blog/high-refresh-rate-displays
• WebKit blog - Designing Websites for iPhone X: webkit.org/blog/7929/designing-websites-for-iphone-x
• Mozilla Hacks - Performance with requestAnimationFrame: hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe
• Microsoft Learn - requestAnimationFrame in IE: learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh773174
• Wikipedia - DOM Standard: en.wikipedia.org/wiki/Document_Object_Model