Comparing Mootools and jQuery Animation
March 26th, 2009 - JavaScript, Web DevelopmentComments (0)
An early form of the new Ractoon site included Flash navigation to create the effect you now see up there. Although it was straightforward, and performed as desired, the idea of a Flash navigation worried me.
My main concern was that it was a bulky solution to get an effect that, although nice, was not necessary for the user experience. In addition, creating the various stages of degradation would require additional CSS and graphics that the majority would not ever see, but was necessary for those that would.
After awhile I realized the effect I was going for was not so complex. Some tweens, a little opacity and a couple graphics could accomplish the same goal using a JavaScript library such as Mootools or jQuery. This would also create a graceful degradation from JavaScript to CSS and finally HTML. I chose Mootools simply because I had used it before, and only after completing the site did I find that this saved me some headaches.
Shortly after starting development of the new navigation I ran into a wall – the effects weren’t clearing properly. It was around this time that Dave Shea posted an article on A List Apart titled: “CSS Sprites 2 – It’s JavaScript Time” which examined a solution using jQuery. Reading through his article helped me identify the problem with my script and continue on.
Now why did I continue using Mootools rather than copy/paste Dave’s elegant solution in jQuery? One of my criteria when switching from Flash to JavaScript was that it should perform identically. The Flash implementation used the Tweener library to create smooth fade effects that would resume if you took your cursor of the navigation item.
If you play with the demo menus at the top of the CSS Sprites 2 article ( particularly present on the sliding ones ), you’ll notice that if you mouseover and mouseout quickly the images begin to jerk around. It seemed like jQuery did not maintain the animation state between mouse events. The Mootools implementation, however, performed identically to the original Flash prototype.
A direct comparison between the article demo and a Mootools equivalent can be viewed here. gonchuki has even gone so far as to develop a Sprites2 class for Mootools to make future implementations easier.
This post is not meant to fuel the debate of which JavaScript library reigns supreme. But to illustrate that these libraries do differ, and may have strengths and weaknesses in areas that should be considered to choose the right tool for the job.