requestAnimationFrame.js

A more robust browser polyfill for requestAnimationFrame()

What is this about?

---

What is requestAnimationFrame?

The requestAnimationFrame() method of a browser's window object is used for setting up an update to an animation, asking the browser to call the passed-in callback function to draw the next frame when it is time to repaint the screen. It is useful for effective JavaScript-based animation. See reference documentation here (MDN) and here (W3C) for more info.

Why a requestAnimationFrame polyfill?

Why any polyfill? Because the function didn't always exist, and old browsers therefore don't support it. Is it supported by a browser my users need to use?

Why this particular requestAnimationFrame polyfill?

Because most (all?) of the other ones have a hidden flaw: they can't handle multiple, simultaneous animations. See a fuller explanation on this blog post.

How do I get it?

---

Plain code download (just the source code):

requestAnimationFrame.js (full version)
requestAnimationFrame.min.js (minified version)

With npm: (for use as a dependency inside another npm-based project)

npm install @trajanmcgill/requestanimationframe

For development or local building of requestAnimationFrame.js itself:

• Prerequisites:
  1. git
  2. npm
• Setup:
  1. First, clone from GitHub:

     git clone https://github.com/trajanmcgill/requestAnimationFrame.js.git
     

  2. Next, get the linting and build tools and run them. Move inside the newly created project directory and run:

     npm install
     

     The npm install will automatically run the build process. Source files can be found in the src directory; distributable files will be deposited in dist.
• Rebuilding: In the project directory:

   npm run prepare
  

  This will kick off a Grunt script that will:
  1. Clean out the dist folder.
  2. Run JSHint against the source.
  3. Copy the full source and a minified version (created with UglifyJS) to the dist folder.

How do I use it?

---

Simply include the polyfill code in your HTML, either as a separate script file or by pasting it into one of your own, and then just call window.requestAnimationFrame() exactly as you would on the native browser version. (Note: This shim code will leave the browser-native version alone if one is present; it only adds the function if it is not already defined.)

---

---

Authors

• Trajan McGill

License

This project is licensed under the Unlicense, which means it is more or less public domain and free to use in any form anywhere. See the LICENSE file for details.

Acknowledgments

Thanks to Paul Irish, Erik Möller, Joel Fillmore, and Tino Zijdel for their earlier polyfill suggestions which inspired this version.