Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with requestAnimationFrame. Use it for any visual change over time, like moving an element or running a game loop.
Why it exists
Before requestAnimationFrame, developers used setTimeout or setInterval for animations. This was inefficient because the timing was not synchronized with the browser's rendering process. This could lead to dropped frames (stuttering) if the browser was busy, or wasted work if updates happened when the screen wasn't ready to repaint.
The mental model
Think of requestAnimationFrame as asking the browser, "Please run this function for me right before you draw the next frame." It's a cooperative scheduling mechanism that syncs your animation logic with the display's refresh rate, preventing visual glitches and saving CPU cycles and battery life.
How it works
You call window.requestAnimationFrame(myUpdateFunction). The browser adds your function to a queue. Just before the next repaint, the browser executes all functions in the queue, passing each one a high-resolution timestamp indicating when the frame started. To create a continuous loop, your function must call requestAnimationFrame again to schedule itself for the next frame. It is a one-shot call.
When to use it
Use it for any logic that results in a visual change on screen, frame by frame. This is the standard for JavaScript-driven animations, game loops, canvas or WebGL rendering, and dynamic data visualizations. It's highly efficient because the browser automatically pauses it when the tab is in the background.
When not to use it
Do not use it for tasks that don't involve visual updates or that must run at a guaranteed interval, even in the background. For non-UI background tasks, a Web Worker with setTimeout is a more suitable choice. It is a rendering scheduler, not a general-purpose timer.
One canonical example
The biggest footgun is creating animations that run faster on high-refresh-rate screens. To avoid this, you must use the timestamp argument to calculate the time elapsed since the last frame. A typical animation loop function receives a timestamp. It calculates deltaTime = timestamp - lastTimestamp, updates the object's position by speed * deltaTime, saves the current timestamp as lastTimestamp for the next run, and finally calls requestAnimationFrame again to continue the loop. This makes the animation's speed independent of the frame rate.
Interview question
What is the key benefit of requestAnimationFrame for animations over traditional timers like setTimeout?
- a.It guarantees a consistent animation speed across all display refresh rates.
- b.It allows animations to continue running efficiently even when the browser tab is in the background.
- c.It ensures animation updates are synchronized with the browser's display repaint cycle.Correct
- d.It provides a simpler API for creating complex animation sequences without manual looping.
Why? this is the answer
The primary advantage of requestAnimationFrame is its synchronization with the browser's repaint cycle, preventing dropped frames and wasted work. Option A is incorrect because achieving consistent speed across refresh rates requires manual calculation using the provided timestamp, not an automatic guarantee.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on web apis — each one lists the topics its interview covers.
See open roles