Â鶹Éç

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.