Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Replaces the standard jQuery timer loop with requestAnimationFrame where supported. Requires jQuery 1.8
branch: master

This branch is 9 commits behind gnarf:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
libs
src
test
.gitignore
LICENSE-MIT
README.md
grunt.js
package.json
requestAnimationFrame.jquery.json

README.md

jQuery requestAnimationFrame

Replaces the standard jQuery timer loop with requestAnimationFrame where supported.

Requires jQuery 1.8+

What is requestAnimationFrame?

requestAnimationFrame is a working draft spec that attempts to improve our animation performace by better syncing up with the frame rate of the browser. For more information, read this article on Jank Busting

Why should I use it?

To quote part of the Jank Busting article:

  • Animations in background tabs get paused, conserving system resources and battery life.

  • If the system can't handle rendering at the screen's refresh rate, it can throttle animations and produce the callback less frequently (say, 30 times a second on a 60Hz screen). While this drops framerate in half, it keeps the animation consistent -- and as stated above, our eyes are much more attuned to variance than framerate. A steady 30Hz looks better than 60Hz that misses a few frames a second.

Download

Download the production version or the development version of version 0.1.1.

In your web page:

<script src="jquery.js"></script>
<script src="jquery.requestAnimationFrame.min.js"></script>

Documentation

There isn't anything you need to do other than include the jquery.requestAnimationFrame.js file to use requestAnimationFrame.

You should however beware of the first point above: Animations in background tabs get paused.

This means if you are using a setInterval or setTimeout to queue up new animations, when the user returns to the backgrounded page, jQuery will finally see an animation finish, and then start playing everything queued. There is more information about potential workarounds in jQuery Core Bug #9381

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!

Release History

  • 0.1.1 - Mar 5 2013
    • Removed ms prefix
  • 0.1.0 - Jan 13 2013
    • Initial Release

License

Copyright (c) 2012 Corey Frang
Licensed under the MIT license.

Something went wrong with that request. Please try again.