What Is requestAnimationFrame and When Should You Use It?
Learn what requestAnimationFrame does, how it syncs with the browser repaint cycle, and when to use it over setInterval.
Expected Interview Answer
requestAnimationFrame schedules a callback to run right before the browser’s next repaint, synchronizing JavaScript-driven animation with the display’s refresh cycle so updates are smooth, efficient, and automatically paused when the tab is inactive.
Unlike setTimeout or setInterval, which fire on a fixed timer regardless of the browser’s rendering schedule, requestAnimationFrame callbacks are batched by the browser to run once per frame, typically aligned to the display’s refresh rate (commonly 60Hz, so roughly every 16.7ms). This avoids wasted work — you never compute more animation frames than the screen can actually display — and avoids visual tearing that can occur when updates land mid-paint. The browser also automatically throttles or pauses requestAnimationFrame callbacks in background or hidden tabs, saving battery and CPU without extra code. Because each callback receives a high-resolution timestamp, you can compute frame-independent animation progress rather than assuming a fixed time step, which keeps motion consistent across variable refresh rates.
- Synchronizes updates with the browser’s actual repaint cycle, avoiding wasted frames
- Automatically pauses in background tabs, saving CPU and battery
- Provides a high-resolution timestamp for frame-independent animation math
- Reduces visual tearing compared to timer-based updates
AI Mentor Explanation
requestAnimationFrame is like a scoreboard operator who updates the display only exactly when the stadium’s big screen refreshes, instead of on some arbitrary clock that might not line up. Updating on a random timer risks a half-drawn frame flashing on screen mid-refresh, which looks jarring to fans. By syncing updates to the screen’s own refresh moment, every change appears clean and complete. That refresh-synchronized-update behavior is exactly what requestAnimationFrame provides over a fixed timer.
Step-by-Step Explanation
Step 1
Schedule the callback
Call requestAnimationFrame(callback) to register work for the next repaint.
Step 2
Browser waits for the optimal moment
The browser runs the callback right before its next paint, aligned to the display refresh rate.
Step 3
Compute frame-independent progress
Use the high-resolution timestamp argument to calculate elapsed time since the last frame.
Step 4
Re-schedule for continuous animation
Call requestAnimationFrame again inside the callback to continue the loop, and cancelAnimationFrame to stop it.
What Interviewer Expects
- Clear contrast with setTimeout/setInterval-based animation
- Understanding that callbacks run once per repaint, not on a fixed timer
- Awareness of automatic throttling in background tabs
- Knowledge of using the timestamp for frame-independent motion
Common Mistakes
- Using setInterval for animation instead of requestAnimationFrame
- Assuming a fixed 16ms delta instead of using the provided timestamp
- Forgetting to call cancelAnimationFrame, leaking a running loop
- Not re-scheduling requestAnimationFrame at the end of the callback for continuous animation
Best Answer (HR Friendly)
“requestAnimationFrame tells the browser to run your animation code right before it repaints the screen, so updates line up perfectly with the display instead of firing on an arbitrary timer. It is also smart enough to pause automatically when the tab is not visible, saving battery.”
Code Example
let start = null
let rafId = null
function step(timestamp) {
if (start === null) start = timestamp
const elapsed = timestamp - start
const progress = Math.min(elapsed / 1000, 1) // 1 second animation
box.style.transform = `translateX(${progress * 200}px)`
if (progress < 1) {
rafId = requestAnimationFrame(step)
}
}
rafId = requestAnimationFrame(step)
// cancelAnimationFrame(rafId) to stop earlyFollow-up Questions
- Why is requestAnimationFrame preferred over setInterval for animation?
- How would you throttle a scroll handler using requestAnimationFrame?
- What happens to requestAnimationFrame callbacks when a tab is backgrounded?
- How does requestIdleCallback differ from requestAnimationFrame?
MCQ Practice
1. When does a requestAnimationFrame callback typically run?
requestAnimationFrame schedules work to run right before the next repaint, synced to the display refresh.
2. What happens to requestAnimationFrame callbacks in a backgrounded tab?
Browsers throttle or pause rAF callbacks in inactive tabs to save CPU and battery.
3. What does the timestamp argument passed to a requestAnimationFrame callback represent?
The timestamp lets you compute elapsed time precisely, avoiding assumptions about a fixed frame delta.
Flash Cards
What does requestAnimationFrame schedule? — A callback to run right before the browser’s next repaint.
Why avoid setInterval for animation? — It runs on a fixed timer disconnected from the display’s actual refresh cycle.
What stops a requestAnimationFrame loop? — Calling cancelAnimationFrame with the returned id.
What does the callback timestamp enable? — Frame-independent animation progress calculations.