Making Smoother Animations with JQuery

Have you ever designed a custom animation using Jquery and found that the motion wasn't as smooth as you would like?

There is a good chance that the choppiness was being caused by JQuery's default high framerate.

Sometimes, especially with a complicated animations, the framerate is too high for the client to run it smoothly causing the animation to drop frames when it can't keep up.

Many javascript frameworks allow the default framerate to be modified by developers but JQuery doesn't give you the option at this time. It may in the future as there is a ticket out to add this functionality: http://dev.jquery.com/ticket/6726

In the meantime, I wrote up a quick JQuery plugin that allows for customization of the framerate for a project we're currently working on that uses lots of animations. The default framerate in the stock build of jQuery 1.4.2 is @77fps. Running this plugin will reset that default to 30fps. The plugin also accepts two options: framerate and logframes. The framerate option will allow you to set the framerate to your desired speed. The logframes option, if set to true, will log the running framerate to the console anytime an animation is running.

Download jquery.framerate.js

Have you ever designed a custom animation using jQuery and found that the motion wasn't as smooth as you would like?