requestAnimationFrame: The secret to silky smooth JavaScript animation!

We try to rely on CSS to perform our animations as much as possible, but we also have to fallback to JS some times.  And the old standard was to use either setTimeout or setInterval to loop through the steps to create the desired animation.

But a new JS function offers a better solution (some times):
http://creativejs.com/resources/requestanimationframe/

The basic improvements are:

  • Stops running when a tab is not “active”, so frees CPU cycles for other actions
  • Cycles at “the best speed the user’s browser can handle”
  • Groups all of animations into a single repaint
  • Uses GPU, not CPU (so is also hardware-accelerated)

Pitfalls:

  • Not a standard yet, so need vendor prefixes:
    • webkitRequestAnimationFrame in Chrome and Safari
    • mozRequestAnimationFrame in Firefox
    • msRequestAnimationFrame in Internet Explorer 10
  • While it is pretty widely supported, not everyone does, but a polyfill is available if we need extra coverage (in fact, the polyfill is so small, that it might just be a nice way to normalize code and add it as a Tactile method, like tactile.effects.Animate?)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s