Web/API/Window/requestAnimationFrame

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.

Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate another frame at the next repaint. requestAnimationFrame() is 1 shot.

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 multiple callbacks queued by requestAnimationFrame() begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload (in the code example below we only animate the frame when the timestamp changes, i.e. on the first callback). 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 by performance.now(), indicating the point in time when requestAnimationFrame() 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 StandardThe definition of 'requestAnimationFrame' in that specification.	Living Standard	No change, supersedes the previous one.
Timing control for script-based animationsThe definition of 'requestAnimationFrame' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`requestAnimationFrame`	Chrome Full support 24 Full support 24 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Edge Full support 12	Firefox Full support 23 Notes' Full support 23 Notes' Notes' Callback parameter is a `DOMHighResTimestamp`. This means ten microsecond precision and zero time as `performance.now()`. No support 11 — 42 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: moz Notes' Callback parameter is a `DOMTimestamp`. This means millisecond precision and zero time as `Date.now()`. No support 4 — 11 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: moz Notes' Could be called with no input parameters.	IE Full support 10	Opera Full support 15 Full support 15 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Safari Full support 6.1 Full support 6.1 Full support 6 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Chrome Android Full support 25 Full support 25 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Firefox Android Full support 23 Full support 23 No support 14 — 42 Prefixed' Prefixed' Implemented with the vendor prefix: moz	Opera Android Full support 14 Full support 14 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Safari iOS Full support 7 Full support 7 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: webkit
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.