LearnHave you seen requestAnimationFrame?

writes on April 8, 2011

Share with your friends


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.

9 Responses to “Have you seen requestAnimationFrame?”

  1. agree that css3 is a great thing and want to learn how to use it in a good way. now i’,m just trying and a kinda playing with it to know what it can do.

  2. This method is used in Three.js

  3. 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.

    • Anonymous on April 8, 2011 at 8:24 pm said:

      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.

  4. How would I add this to my website to make it work with jquery animations? Is it literally just adding those 7 lines or do you have to do something special?

    • Anonymous on April 10, 2011 at 5:35 pm said:

      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.

  5. This is my first time to see requestAnimationFrame,it looks awesome and great

  6. This is my first time to see requestAnimationFrame,it looks awesome and great

Leave a Reply

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more