Re: jQuery Animation vs CSS
In response to my Smashing Magazine article on implementing off-canvas navigation I received a great comment by Michael Benin:
Dropping in these two plugins should achieve what is accomplished in this article using CSS, and furthermore will utilize RAF. It would be interesting for you to run the same tests against JS/jQuery with these jQuery plugins.
I agreed that these plugins would speed up my jQuery demo but they would never overtake the speed of my CSS demo — and that’s ignoring the extra overhead and complexity.
The proof is in testing so let’s see both in action:
jQuery Animate Enhanced
jquery.animate-enhanced detects CSS transitions and automatically converts your jQuery animation. Basically in theory it’s an invisible plug-and-play deal; a quick win. In practice the animation performance is obviously improved, but there are a few issues:
- Like my jQuery demo inline styles are left over in the DOM.
- This particular plugin has a bug — or lacks support — for percentages. That means I have to calculate
$('#nav').width()on the fly.
- It causes animation flickering for the reasons highlighted at the end of my article.
Issues aside, this plugin basically achieves something close to my final demo (and in fairness, the last two issues could be fixed). However, for the price of jQuery and a plugin — and the first two issues — it’s ultimately needless complexity. Do consider this plugin though if you want to retro-fit existing builds.
jQuery Enhanced timeline
timeline for my final demo
jQuery animation uses a sequence of timeouts to trigger each frame. These timeouts are completely ignorant of the browser’s ability to actually render changes in a timely manner. Modern browsers implement requestAnimationFrame which is far more intelligent.
jQuery requestAnimationFrame Demo
Testing this on my Galaxy Nexus shows no noticeable improvement over the basic jQuery demo. Animation is still very slow and stuttering.
jQuery animate timeline
jQuery requestAnimationFrame timeline
The problem is that regardless of the benefits of requestAnimationFrame, we’re still iterating rapidly over an inline style property and the browser just isn’t fast enough to calculate the reflow. At the end of the day, you really don’t want to be manipulation DOM elements at such speed. requestAnimationFrame is very useful for the likes of canvas animation, but not here.