Custom element animation
Animating DOM properties that CSS cannot handle conveniently.
JS Puzzles · Const
requestAnimationFrame
requestAnimationFrame schedules an animation callback for the browser's next suitable animation opportunity. The callback receives elapsed time in milliseconds, and its returned request ID can be used to cancel the scheduled call.
How it works
Calling requestAnimationFrame schedules a callback for the browser's next suitable animation-and-repaint opportunity. The callback receives elapsed page-load time in milliseconds; use that timestamp to calculate motion, and call requestAnimationFrame again when another frame is needed.
Syntax
let requestId = requestAnimationFrame(callback)Parameters
| Name | Type | Description |
|---|---|---|
callback | function | The function scheduled to run when the browser is ready for the animation opportunity; it receives elapsed page-load time in milliseconds. |
Returns
A request identifier that can be passed to cancelAnimationFrame(requestId).
Key points
- The call accepts a callback and returns an identifier for the scheduled request.
- The browser chooses the suitable execution moment rather than the code forcing an exact delay.
- Use the callback's millisecond timestamp to calculate animation progress.
- performance.now() provides the same kind of elapsed-time reference when independently measuring animation timing.
- Use this API for animations that require JavaScript control or cannot be handled effectively by CSS.
Common mistakes
- A scheduled callback runs once; keep its returned request ID if you may need to cancel it with cancelAnimationFrame.
- DOM changes made in the callback can be grouped with other animation callbacks and CSS animations, reducing repeated geometry recalculation and repaint.
Example: Animate an element with a frame loop
const box = document.querySelector('#box');
let start;
function frame(time) {
start ??= time;
const progress = Math.min((time - start) / 1000, 1);
box.style.transform = `translateX(${progress * 240}px)`;
if (progress < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);Moves the element for one second, using the callback timestamp to calculate progress and scheduling each next frame explicitly.
When to use it
Time-based animation
Driving a visual update loop whose progress depends on elapsed time.
Cancellable animation
Stopping a pending animation when it is no longer needed.
Interview questions
QWhat does requestAnimationFrame do?
requestAnimationFrame schedules a callback for the nearest time when the browser wants to perform animation, typically while preparing a repaint. This lets the browser coordinate JavaScript animation work with rendering.
Follow-up: How does a continuous animation continue? The callback must schedule the next frame by calling requestAnimationFrame again, usually after updating the element.
QWhat argument does the callback receive?
The callback receives one argument: the time elapsed since page loading, measured in milliseconds. This value can also be obtained with performance.now(), so it can drive time-based progress rather than assuming a fixed frame interval.
Follow-up: Why use the supplied time? Frame timing depends on the browser, so elapsed time keeps motion consistent when frame intervals vary.
QHow can a scheduled callback be cancelled?
The function returns a request ID. Pass that ID to cancelAnimationFrame(requestId) to cancel the scheduled callback before it runs.
Follow-up: When is this useful? It allows an animation to stop cleanly when its target is removed, hidden, or no longer relevant.
Related
cancelAnimationFrameperformance.nowCSS animations