Have you seen requestAnimationFrame?

CSS3 Animations make a huge impact on reducing CPU and making animation more efficient in the browser, but I don’t think we’ll ever get away from sometimes having to use JavaScript to do animations.

requestAnimationFrame is a neat new draft spec that a lot of the browsers are starting to support in nighty builds. It basically sets up a global animation run loop for your entire page. It’s really useful for reducing CPU usage when doing JavaScript based animations because it allows the browser to only redraw once after all of the registered animation callbacks have been called, rather than after each individual callback. It also allows the browser to throttle the number of animation callbacks that are called for tabs in the background.

There are a ton more details about requestAnimationFrame on Paul Irish’s blog, including how to wire it up for browsers that don’t support it yet so that you can start writing JavaScript animations that use requestAnimationFrame now.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

9 comments on “Have you seen requestAnimationFrame?

  1. If I can help it I try to use css transitions for all of my animations. If the animation is required for the user experience I will make a javascript fallback for the browsers that don’t support it.

    • I absolutely agree with preferring CSS transitions and falling back to JavaScript.

      One spot where using JavaScript can’t be helped is on the canvas. That’s where things like requestAnimationFrame will be a big deal going forward.

      • I think the main reason for using requestAnimationFrame will be animations with Canvas and WebGL mostly as they can be the most resource taxing in comparison to simple DOM element animations.

    • You wouldn’t add it to your website if you are using jQuery animations. jQuery manages the render loop for the animations so you don’t have to, so you are not writing the code that would be optimized by requestAnimationFrame. When/If the api is finalized or stable enough, jQuery could be updated to utilize it, which should yield smoother animations in browsers that support it.

      Technically, someone could (and maybe did) patch jQuery to add support for requestAnimationFrame, but it’s still a really new API (only available in nightly builds, and no formal API), so really it would be for experimentation purposes.