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.