Questions And Answers

More Tutorials

Javascript requestAnimationFrame

Use requestAnimationFrame to fade in element

 <h1>This will fade in at 60 frames per second (or as close to possible as your hardware

 // Fade in over 2000 ms = 2 seconds.
 var FADE_DURATION = 2.0 * 1000;

 // -1 is simply a flag to indicate if we are rendering the very 1st frame
 var startTime=-1.0;

 // Function to render current frame (whatever frame that may be)
 function render(currTime) {
 var head1 = document.getElementsByTagName('h1')[0];

 // How opaque should head1 be? Its fade started at currTime=0.
 // Over FADE_DURATION ms, opacity goes from 0 to 1
 var opacity = (currTime/FADE_DURATION); = opacity;

 // Function to
 function eachFrame() {
 // Time that animation has been running (in ms)
 // Uncomment the console.log function to view how quickly
 // the timeRunning updates its value (may affect performance)
 var timeRunning = (new Date()).getTime() - startTime;
 //console.log('var timeRunning = '+timeRunning+'ms');
 if (startTime < 0) {
 // This branch: executes for the first frame only.
 // it sets the startTime, then renders at currTime = 0.0
 startTime = (new Date()).getTime();
 } else if (timeRunning < FADE_DURATION) {
 // This branch: renders every frame, other than the 1st frame,
 // with the new timeRunning value.
 } else {

 // Now we are done rendering one frame.
 // So we make a request to the browser to execute the next
 // animation frame, and the browser optimizes the rest.
 // This happens very rapidly, as you can see in the console.log();
// start the animation

Keeping Compatibility

Of course, just like most things in browser JavaScript, you just can't count on the fact that everything will be the same everywhere. In this case, requestAnimationFrame might have a prefix on some platforms and are named differently, such as webkitRequestAnimationFrame. Fortunately, there's a really easy way to group all the known differences that could exist down to 1 function:

window.requestAnimationFrame = (function(){
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.setTimeout(callback, 1000 / 60);

Note that the last option (which fills in when no existing support was found) will not return an id to be used in cancelAnimationFrame. There is, however an efficient polyfill that was written which fixes this.

Cancelling an Animation

To cancel a call to requestAnimationFrame, you need the id it returned from when it was last called. This is the parameter you use for cancelAnimationFrame. The following example starts some hypothetical animation then pauses it after one second.

// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
 // do some animation
 // request next frame
// pauses the animation
function pause() {
 // pass in the id returned from the last call to requestAnimationFrame
// begin the animation
function start() {
 // store the id returned from requestAnimationFrame
 requestId = requestAnimationFrame(draw);
// begin now
// after a second, pause the animation


In this page (written and validated by ) you learned about Javascript requestAnimationFrame . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Design Patterns.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.