I've got the opportunity to build a client-heavy web experience with a big emphasis on transitions and effects. This is probably something that would have been built using Flash just a short time ago, but today we're using everyone's favorite JavaScript library, jQuery.
Just before diving in, I attended jQuery
Boston and got totally inspired
by a few key talks on JavaScript architecture, mobile web apps, and one
gnome-filled piece from Karl Swedberg titled jQuery Effects: Beyond the
Basics. This was a really
jam-packed presentation that had something for all levels of jQuery
ninja. My favorite part was a little recursive function called
sequencer that calls animations, one after the other, on a collection
of elements. If you try to do something like this directly (without the
sequencer):
$('#Gnomes').children().animate({height: '100px'}, 'fast');
jQuery is going to perform the animations simultaneously, which may or may not be desired. I grabbed the sequencer because I wanted to create a tiling-in effect for a list of items of a dynamic length. In the process, I generalized the sequencer a bit, so it works with not only animate, but the shortcuts we've all come to love such as hide/show, slideIn/slideOut, and so on, and packaged it as part of a small transitions framework that's hopefully going to allow me to do some rapid prototyping on the transitions in my site. Read on for the demo and github link!
The transition object (feel free to replace cb with your own global
namespace) can be extended to add custom transitions and provides the
sequencer for use in them. I also built a demo consumer for the object
that hopefully gives a good sense of how this is used (and how useful it
can be).
The sequencer now also allows for an optional callback function once all elements have animated, and can traverse the elements backwards or forwards by changing the direction in your transition. In my example below, I un-tile the list backward before re-tiling it forward, followed by a callback that re-enables the "Start" button.
Choose a tile count and click "Start" multiple times to see the effect:
The code, along with the above demo, is available on github.