jQuery Effect Sequencer

JavaScript, jQuery

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.