window.requestAnimationFrame

Summary

window.requestAnimationFrame tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame. The method takes as an argument a callback to be invoked before the repaint.

You should call this method whenever you're ready to update your animation onscreen, to request that a repaint be scheduled. The repaint may occur up to 60 times per second for foreground tabs, but may be reduced to a lower rate in background tabs.

The callback method is passed a single argument, which indicates the time at which the animation frame is scheduled to occur.

Syntax

requestID = window.mozRequestAnimationFrame(callback);   // Firefox
window.msRequestAnimationFrame(callback);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback); // Chrome/Webkit

Parameters

callback

A parameter specifying a function to call when it's time to update your animation for the next repaint.

Return value

requestID is a long integer value 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

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Browser compatibility

Gecko notes

Prior to Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.

Chrome notes

The correct call in Chrome to cancel the request is currently window.webkitCancelAnimationFrame(). The older version, window.webkitCancelRequestAnimationFrame(), has been deprecated but is still supported for now.

Specification

Timing control for script-based animations: requestAnimationFrameWD

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