’m pretty excited to see the wealth of APIs that are bundled with browsers these days. I’ve known about the requestAnimationFrame event timing API for some time now. Although, it’s still pretty heavy in beta, it’s it’s going to have a significant impact on performance when it comes to running javascript animations in the browser.

Currently, you may resort to using a JS framework like jQuery to running your animations, which may result to using the window.setTimeout or window.setInterval methods to control the timing of the animation.

This is great, but becomes a problem when you really no longer need to run those cycles. If the animated web page is not the active page, you would want those animations to either be slowed down or stopped completely. A web page that isn’t active, doesn’t deserve the cpu cycles it takes to run the page. Less CPU cycles equals better Battery Life.

So, in comes the more efficient way of doing this requestAnimationFrame. This API basically determines what it would take to run an animation.

When requested, the user agent (could call it the browser) figures out how smoothly (dedicated frame rates) it should run the animation.

So if you’re currently using the page, the agent basically knows to run the animations at more frames per second, allowing you to actually see the animations. If the page does not have the visitors focus, then it may skip a few frames, therefore dedicating less cycles to run the animation. If the page is not in use, why dedicate a lot CPU power to run it smoothly.

The object is quite simple, it takes two parameters, the animation method and the object the animation is being performed on.

Example

var animatedElement = document.getElementById( "animated-element" ),  
    animationStartTime
;

// Refresh the animation frame-make big border
function refreshAnimation(time)  
{
    animatedElement.style.borderWidth = ( (time - animationStartTime) /1000 /*let's make it slow*/) %10 /*up to 10px*/ + "px";
    requestAnimationFrame(refreshAnimation, animatedElement);
}

// initialize the animation - get the timer started.
function doAnimation(time)  
{
    animationStartTime = Date.now();
    requestAnimationFrame( refreshAnimation, animatedElement );
}

doAnimation(); // Run the animation;  

The b.r.e.a.k.d.o.w.n

refreshAnimation

function refreshAnimation( time ) ...  

This method does exactly what it says, it refreshes the animation, in other words refreshes the frame. So it gets continually called by the user agent (requestAnimationFrame). But the difference is, that the user agent determines how often it will actually call it.

doAnimation

function doAnimation() ...  

This method kicks-off to our animation, we determine the initial time and use it to calculate where in our animation we’re currently at. The user agent maintains the time parameter. Pretty slick and awesome!

In Development

The api is new and in development, so as with everything experimental, all browsers have their own implementation of the API. Paul Irish suggested a great way to take advantage of the api in a “cross-browser” fashion.

Live Example

Live example on jsFiddle.