Experimenting with visual performances of jQuery animations
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
bookmarklet.js

README.md

What can it do?

  • Manipulate jQuery interval property and see the effects in realtime.
  • See how the interval affects the smoothness of animations.
  • Open your system monitor and see how it affects CPU usage. Mozilla only:
  • Switch from setInterval() based animation ticks to MozRequestAnimationFrame based animation.
  • See the difference between "how often can js run" and "how often can a frame be painted"

What will I learn?

  • That decreasing the interval value doesn't really make animations smoother, especially for complex animations.
  • That your browser is always doing its best and increasing the interval is not helpful when fps is low.
  • That increasing the interval can significantly reduce CPU usage for simple to moderatly complex animations.
  • That a MozRequestAnimationFrame based animation logic is currently slower than the traditionnal setInterval based one.

Where can I get it?

There's a live demo where you can grab the bookmarklet.

There's also a video introduction to this demo.

How do you create such animation?

Using a special branch of the path plugin, combined with the rotate cssHook.