The window.requestAnimationFrame()
method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
requestAnimationFrame()
if you want to animate another frame at the next repaint.You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. requestAnimationFrame()
calls are paused in most browsers when running in background tabs or hidden <iframe>
s in order to improve performance and battery life.
The callback method is passed a single argument, a DOMHighResTimeStamp
, which indicates the current time (based on the number of milliseconds since time origin). When callbacks queued by requestAnimationFrame()
begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 ยตs).
Be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens. Check the example below for a way to do this.
Syntax
window.requestAnimationFrame(callback);
Parameters
callback
- The function to call when it's time to update your animation for the next repaint. The callback function is passed one single argument, a
DOMHighResTimeStamp
similar to the one returned byperformance.now()
, indicating the point in time whenrequestAnimationFrame()
starts to execute callback functions.
Return value
A long
integer value, the request id, that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to window.cancelAnimationFrame()
to cancel the refresh callback request.
Example
In this example, an element is animated for 2 seconds (2000 milliseconds). The element moves at a speed of 0.1px/ms to the right, so its relative position (in CSS pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed
. The element's final position is 200px (0.1 * 2000
) to the right of its initial position.
const element = document.getElementById('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `Math.min()` is used here to make sure that the element stops at exactly 200px. element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // Stop the animation after 2 seconds window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);
Notes
Edge versions below 17 and Internet Explorer do not reliably fire requestAnimationFrame
before the paint cycle.
Specification
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'requestAnimationFrame' in that specification. |
Living Standard | No change, supersedes the previous one. |
Timing control for script-based animations The definition of 'requestAnimationFrame' in that specification. |
Obsolete | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
requestAnimationFrame | Chrome
Full support
24
| Edge Full support 12 | Firefox
Full support
23
| IE Full support 10 | Opera
Full support
15
| Safari
Full support
6.1
| WebView Android
Full support
โค37
| Chrome Android
Full support
25
| Firefox Android
Full support
23
| Opera Android
Full support
14
| Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
Return value | Chrome Full support 23 | Edge Full support 12 | Firefox Full support 11 | IE Full support 10 | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support 25 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6.1 | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
Window.mozAnimationStartTime
Window.cancelAnimationFrame()
- mozRequestAnimationFrame - Blog post
- requestAnimationFrame for smart animating - Blog post
- Animating with javascript: from setInterval to requestAnimationFrame - Blog post
- Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
- TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
- Paul Irish: requestAnimationFrame API: now with sub-millisecond precision