requestAnimationFrame

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

requestAnimationFrame

This page has been flagged with the following issues:

High-level issues:

• Missing Relevant Sections

Content:

• Incomplete

• Compatibility Incomplete

Not part of user_timing, resource_timing, or navigation_timing interfaces.

Summary

A method to invoke at the optimal time a callback to update the frame of an animation

Method of dom/window

Syntax

var handle = window.requestAnimationFrame(callback);

Parameters

callback

Data-type: function

The animation code to be run when the system is ready.

Return Value

Returns an object of type Number.

Needs Examples: This section should include examples.

Notes

Unlike older animation techniques based on setTimeout and setInterval methods, requestAnimationFrame based animation occurs when the system is ready. This leads to smoother animations and less power consumption than animations because requestAnimationFrame takes the visibility of the web application and the refresh rate of the display into account, The requestAnimationFrame method creates only a single animation request. To create continous animation, a new request must be registered for each frame. To cancel an animation request before the animation function is called back, use cancelAnimationFrame.

Related specifications

Specification	Status	Related Changes
Timing control for script-based animations	W3C Working Draft

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	24 21 -webkit	14 -moz	10	Unsupported	6 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic support	?	?	?	?	?	?	?	?

See also

Related articles

Animation

• JavaScript animation

• requestAnimationFrame

• @keyframes

• css/cssom/CSSKeyframeRule

• css/cssom/CSSKeyframeRule/keyText

• css/cssom/CSSKeyframeRule/style

• css/cssom/CSSKeyframesRule

• css/cssom/CSSKeyframesRule/cssRules

• css/cssom/CSSKeyframesRule/deleteRule

• css/cssom/CSSKeyframesRule/findRule

• css/cssom/CSSKeyframesRule/insertRule

• css/cssom/CSSKeyframesRule/name

• cubic-bezier

• steps

• animation

• animation-delay

• animation-direction

• animation-duration

• animation-fill-mode

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• Animations

• transition

• transition-timing-function

• SVG animation

• Making things move with CSS3 animations

• Dynamic visual effects with CSS3 transitions

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]