Version 1.3Animation timelines

Adding events and pauses to a Timeline

Channels in a timeline can contain Animations, numbers & functions. Numbers make a channel pause in seconds and functions are called when the timeline reaches it.

Timelines also have standard events and methods similar to Animations. See the API for a full listing including examples.

Creating a mexican wave

This example creates a number of divs which increase and decrease in size.

var howManyDivs = 100, htmlStr = [], i, len; //create an html string containing the amount of divs we'll animate
for (i = 0; i < howManyDivs; i++) { htmlStr[i] = "<div style='left:" + i*7 + "px'></div>";
}
//create the divs
glow.dom.get("#waveContainer").html(htmlStr.join("")); var waveDownAnims = [], waveUpAnims = []; //create a wave up & wave down anim for each div
var wavingDivs = glow.dom.get("#waveContainer div").sort().each(function(i) { waveDownAnims[i] = glow.anim.css(this, 1, { "top": {from:70, to:0} }, { tween: glow.tweens.easeBoth() } ); waveUpAnims[i] = glow.anim.css(this, 1, { "top": {from:0, to:70} }, { tween:glow.tweens.easeBoth() } );
}); //create a channel for each div.
//Each channel will have a difference pause at the start var channels = [];
for (i = 0, len = waveUpAnims.length; i < len; i++) { channels[i] = [ (i / 100), waveDownAnims[i], waveUpAnims[i] ];
} //put it all together and play
new glow.anim.Timeline(channels, {loop:true}).start();

The above also requires the following CSS:

#waveContainer { overflow: hidden; height: 100px; position: relative;
}
#waveContainer div { position: absolute; width: 6px; height: 30px; background: #700; margin-right: 1px; top: 70px;
}

The above creates 100 divs which move down then up again. Each div does this 1/50 of a second since the previous started. The Timeline ensures the divs don't get out of sync with each other.