Today Facebook released an animation javascript library that modifies CSS properties on the fly. You can download it and use it on your webpages.
Its a very light (10.4 Kb compressed version) animation library and its very easy to use. You can chain events or animations to create the effects you want. You can download it on the facebook developer’s resources page.
A typical effect used in websites is the flash effect to alert or notify of some action.
Here’s all you need to accomplish that:
<a href="#" onclick="Animation(this).to('background', '#fff').from('background', '#ffff4b').go(); return false;">Flash</a>
The syntax is easy. All you need to do is call Animation(this) on your element and then specify what CSS property you want to change on the .to and .from methods. In this case: go from yellow background to white background. The last .go() method tells Animation to run the specified animation.
You can also mix animations or transitions instead of playing one animation after another. For this you have to use .checkpoint() function and .duration() to specify how long the transition will take (in milliseconds). The checkpoints indicate when the second animation will start playing, allowing you to tweak the default behavior of playing one animation after the other one stopped.
So you can basically change anything: colors, widths, lengths, margins, positions, etc. For complete documentation of the library, go to the Facebook Developers Wiki. Its worth checking out.
Its a very simple syntax, with familiar terms (CSS properties) and very lightweight compared to using Prototype and Scriptaculous. Maybe Scriptaulous syntax for doing some animations is simpler or shorter, but you must load Prototype in order to use it, so that makes it heavier. Plus, you need to know the Scriptaculous effects functions and sometimes they are not that tweakable.
Its also nice to see Facebook releasing some open source code (BSD licensed) and contributing back.
