The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call 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() 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 when callbacks queued by requestAnimationFrame() begin to fire. Multiple callbacks in a single frame, therefore, each receive 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).

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 returned from 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

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 24
Full support 24
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support YesFirefox 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 10Opera Full support 15
Full support 15
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: o
Safari Full support 6.1
Full support 6.1
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support YesChrome Android Full support 25
Full support 25
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 23
Full support 23
No support 14 — 42
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support 15Safari iOS Full support 7.1
Full support 7.1
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android ?
Return valueChrome Full support 23Edge Full support YesFirefox Full support 11IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support YesChrome Android Full support 25Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 15Safari iOS Full support 6.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
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