stagger(fn, [options])

Calls the iterator function for each element in the collection, one after another. The method returns a controller object to act as an interface for the animation, allowing it to be stopped and started, and firing events at key times.

This example loads an external SVG file and staggers through each of its <path> and <rect> elements, changing the opacity of the current and previous elements.

Pablo(demoElement).load('/rocket.svg', function(rocket){
    rocket.find('path, rect')
        .attr('opacity', 0.2)
        .stagger(function(current, previous){
            Pablo(previous).attr('opacity', 0.2);
            Pablo(current).attr('opacity', 1);
        }, {t:200, repeat:10});

Here, the controller object is used to toggle the animation when the SVG is clicked.

var colors, svg, shapes, staggerOptions, ctrl;

colors = ['red', 'orange', 'green', 'blue', 'brown'];
svg = Pablo(demoElement).svg({
    width: 495,
    height: 135

shapes ={
    r: 45,
    cx: function(el, i){return i * 90 + 45;},
    cy: 45,
    fill: colors,
    cursor: 'pointer'

staggerOptions = {
    t: 200, // delay between elements, in ms
    bounce: true, // ping-pong back to start
    repeat: -1 // repeat indefinitely

function onStagger(curr, prev, i, lastIndex){
    var prevColor = colors[lastIndex];

    Pablo(curr).attr({cy:90, fill:'purple'});
    Pablo(prev).attr({cy:45, fill:prevColor});

// Controller object
ctrl = shapes.stagger(onStagger, staggerOptions);

svg.on('click', function(){

Iterator function

The iterator function is called with the collection as this and passed several arguments: current - the current element in the sequence, previous - the previous element, i - the index of the current element in the collection, lastIndex - the index of the previous element.



The delay between calling one element and the next, in milliseconds. Default: 1000


Boolean for whether the animation should be called on the first element immediately (false) or after a delay of options.t (true). Default: false


The number of repeats of the animation sequence before it stops. Use a value of -1 to repeat indefinitely, until manually stopped. Default: 1


Boolean for whether the animation starts automatically on calling stagger(). Default: true


Boolean for whether the controller object is destroyed, to free memory, when the animation completes. If set to false, then the animation can be allowed to complete, and then manually started again later. Call destroy() on the controller when it is no longer needed. Default: true


Either asc or desc, to determines of the sequence should run in ascending order or descending (backwards). Default: 'asc'


Boolean to determing what order the animation will take once it completes a sequence. If true, the animation will flip the asc / desc order flag each time it reaches the end / start of the sequence. Default: false

Controller object



Boolean value for whether the staggered animation is currently active.


The index of the previously called element



Start playing the animation from the beginning, or where it had been previously stopped.


Stop the animation. It can be resumed with start().


Start the animation if inactive, otherwise stop it.


Put the animation back to the start. This does not stop the animation.


Stops the animation and resets it.


Frees memory by deleting objects in the controller. Should be called manually if option.autodestroy has been set to false.

Event methods

on, one, oneEach, off, trigger, for interacting with events on the controller object. These work in the same way as controller Events.



Triggered when the animation starts.


Triggered when the animation stops.


Triggered when the first element in the sequence is reached.


Triggered when the last element in the sequence has been reached.


Triggered when the animation sequence has completed and stopped.


Triggered for each element’s iteration of the sequence.


Triggered when the animation is destroyed.

Painting is just another way of keeping a diary.
Pablo Picasso