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 = Pablo.circle().duplicate(4).attr({
    r: 45,
    cx: function(el, i){return i * 90 + 45;},
    cy: 45,
    fill: colors,
    cursor: 'pointer'
}).appendTo(svg);

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(){
    ctrl.toggle();
});

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.

Options

t

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

defer

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

repeat

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

autostart

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

autodestroy

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

order

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

bounce

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

Properties:

active

Boolean value for whether the staggered animation is currently active.

lastIndex

The index of the previously called element

Methods:

start()

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

stop()

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

toggle()

Start the animation if inactive, otherwise stop it.

reset()

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

complete()

Stops the animation and resets it.

destroy()

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.

Events:

start

Triggered when the animation starts.

stop

Triggered when the animation stops.

begin

Triggered when the first element in the sequence is reached.

end

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

complete

Triggered when the animation sequence has completed and stopped.

iteration

Triggered for each element’s iteration of the sequence.

destroy

Triggered when the animation is destroyed.