Need help with jquery-requestAnimationFrame?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gnarf
404 Stars 42 Forks MIT License 55 Commits 4 Opened issues

Description

Replaces the standard jQuery timer loop with requestAnimationFrame where supported. Requires jQuery 1.8

Services available

!
?

Need anything else?

Contributors list

# 701
JavaScr...
jQuery
qunit
ecmascr...
24 commits
# 5,310
React
JavaScr...
HTML
jQuery
19 commits
# 5,649
JavaScr...
html-we...
Webpack
Less
3 commits
# 25,130
Less
lsif-en...
dom-ele...
coffees...
2 commits
# 194
CSS
perform...
chrome-...
javascr...
1 commit
# 21,998
HTML
javascr...
imagemi...
jQuery
1 commit
# 312,728
Shell
markdow...
gfm
Markdow...
1 commit

jQuery requestAnimationFrame

Replaces the standard jQuery timer loop with

requestAnimationFrame
where supported.

NOTE: jQuery 3.0.0 & newer uses

requestAnimationFrame
natively if it's available in the browser. This plugin is only needed for older versions of jQuery. If it detects jQuery 3.0 or newer it warns and does nothing.

Requires jQuery 1.8+

What is
requestAnimationFrame
?

requestAnimationFrame
is a W3C spec (at Candidate Recommendation level) 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.2.

In your web page:


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.2.1, 0.2.2 - Oct 26 2016
    • README updates
  • 0.2.0 - Oct 26 2016
    • Started publishing to npm :tada:
    • Added Browserify/RequireJS/Webpack support
    • Dropped the rAF polyfill
    • Stopped using the vendor-prefixed rAF version; such browsers are now treated as if they didn't have rAF at all
  • 0.1.2 - Apr 15 2013
    • Removed
      o
      prefix - opera only ships with unprefixed rAF
  • 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.