Tuesday, September 18, 2012

Javascript DOM Animation Performance - Speed Comparisons

I've been working with animating using jQuery for a while now and have been struggling with dropped frames and general choppiness. I've also seen others having similar issues - especially on mobile devices. I found this speed test on GreenSock's site and the results are quite remarkable. By far the most noticeable was when I was using my tablet and the 300 object animation in jQuery didn't move yet in TweenLite worked at rather smooth pace of 23 fps. The other notable contender was Zepto - a jQuery clone - which appears to be targeted more to mobile devices and doesn't even support IE.

It tells me that complex animations in the browser are possible. It doesn't mean jQuery's animation engine is bad. It works great for basic effects like fading in/out or sliding in/out of several elements. In fact, I don't think the library makes any claims to be the fastest engine out there. Part of jQuery's draw is its ability to normalize browser support. The tradeoff for that feature will be certainly be animation speed. Its probably way, in part, Zepto performs so well. Although, I'm sure some optimization in jQuery's implementation is always possible.

So, if you're planning to do more complex animations over a large set of elements, then you may want to look at one of these other animation engines. Since TweenLite is only an animation library, it might make sense to use it for those situations in tandem with jQuery's excellent DOM features.