The Wicket framework is adding animation (effects) support to its capabilities. Instead of reinventing the wheel we are looking at different libraries. Our list of requirements is not that big:

  • the footprint of the library should be small
  • the philosophy of the library should be similar to Wicket's
  • the library should enable most if not all effects available in most popular libraries
  • the code should be clean and work in all modern browsers
  • the library should play nice with the leading javascript libraries such as prototype, scriptaculous, dojo, jquery and Yahoo! ui

Now not a very impressive list, but apparently enough to drop scriptaculous and dojo (too large), prototype (not an effects library, can enable conflicts with scriptaculous, rico and others). I haven't got much experience with jquery, but it seems to cover too much for our taste: we don't need a full stack Ajax framework (already have that in place), but merely the animation part.

So that leaves Yahoo! Animation and ... animator.js created by Bernard Sumption. I discovered animator.js when it was first featured on ajaxian.com and added it to my list of things to check out. Recently I was looking at some effects for our application and wanted to remove dependencies left over from the time Wicket didn't support Ajax out of the box. Currently we have superb Ajax support and are now ready to take it to the next level.

I already had created a proof of concept, "I'm jealous of the Scriptaculous front page design", new front page for Wicket. I made my first cut using animator.js and wanted to see how much work it would be to build it with Yahoo! Animation. So I spent a day to rewrite it using Yahoo! and tried to tweak the animation a bit to make it smoother.

You can see the animation on my people.apache.org page (links provided below). I have tried the animations using Safari and Firefox (1.5 and 2.0) and it led me to the following conclusions:

  • safari's javascript is horribly slow
  • firefox's javascript is extremely fast (compared to IE and safari)
  • I hate writing javascript
  • Yahoo's event model is a bit more advanced than animate.js, somehow it looks smoother
  • Animate.js seems to deliver more snappier animations
  • I hate writing javascript

Try the animations yourself and don't limit it to one browser. Comments are welcomed and appreciated. Press the back button to return here and select the other animation:

Enjoy!