What is Window RequestAnimationFrame

Javascript animations with requestAnimationFrame

requestAnimationFrame vs setInterval

setTimeout and setInterval are long-serving techniques in animation with Javascript. It changes the animated element every few milliseconds.

function animate () {// calculate} setInterval (animate, 1000);
function animate () {setTimeout (animate, 500); // calculate} animate ();

setInterval () expects two parameters or arguments: the function that is called at each step of the animation, and the time interval at which the function is called for the animation.

But setInterval () is inefficient. If the user opens another tab in the browser, the animation continues. requestAnimationFrame is more efficient.

Frame rate

For animations with setTimeout or setInterval the script cannot determine the current frequency of the frames. requestAnimationFrame is called by default 60 times per second - more is rarely necessary (or better: possible), because 60 Hz is the refresh rate of most browsers (or a time frame of 16.7 ms).

In animations with requestAnimationFrame the browser can reduce the refresh rate when the animation is running in a background tab in order to reduce energy consumption.

requestAnimationFrame acts differently than setInterval. Instead of repeatedly calling up a timeout with a delay of 16.7ms in a loop, the browser fires an event as soon as the system can render a frame again.


The syntax of requestAnimationFrame () resembles the syntax of setTimeout (), since requestAnimationFrame is called repeatedly. Only a timeout or interval is not required.

If the screen is to be re-rendered, requestAnimationFrame is called with the name of the function in which the changes and calculations are carried out (aka callback).

requestAnimationFrame (callback); var iterationCount = 0; var repeater; function runlock () {easing = easeInQuad (iterationCount, 0, width, 300); lok.setAttribute ('style', 'left:' + easing + 'px'); iterationCount ++; if (iterationCount> 250) {cancelAnimationFrame (repeater); } else {repeater = requestAnimationFrame (runlock); }} runlock ();

The locomotive starts slowly and gets faster: Easing for Javascript animations - Robert Penner's original equations, ported by Kipura for Javascript.

requestAnimationFrame is not a loop or a timer, it has to be called every time the animation changes something. Until the animation ends, requestionAnimationFrame has to be called again and again by the callback function.

So this is the "skeleton" of animation:

function animate () {// calculate / change = animate requestAnimationFrame (animate); } animate ();

requestAnimationFrame with parameters

request animation frame is called with a callback function. If parameters are passed, the callback function can also be an anonymous function, which in turn contains the required parameters.

function moveCurtain (curt, height) {easing = easeInOutQuart (step, height, -300, 90); step ++; if (easing < 1)="" {="" cancelanimationframe="" (repeater);="" step="0;" }="" else="" {="" curt.setattribute('height',easing);="" repeater="requestAnimationFrame" (function="" ()="" {="" movecurtain="" (curt,="" easing);="" });="" }="" }="">

function.bind () is another mechanism to requestAnimationFrame to be called with parameters. bind creates a new function, the this as the first parameter bind () hands over.

function move (elem, timestamp) {// compute left and y elem.setAttribute ("transform", "translate (" + left + "" + y + ")"); requestAnimationFrame (move.bind (0, elem)); }; for (var i = 0; i requestAnimationFrame - browser support

IE9 was the last Microsoft browser that did not support requestAnimationFrame. On January 12th, 2016 Microsoft discontinued support for IE9 for most operating systems.

Support IE10, Safari from version 9, Chrome from V45, Firefox from 43, Opera from 34 requestAnimationFrame already.

External sources