<link href='//fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<h2>TimelineLite.staggerTo() with cycle</h2>
<div id="demo">
  <p>The cycle property allows you to define an array of values or function-based values in all stagger-based methods in TweenMax, TimelineLite and TimelineMax (see comments for full list).</p>
   
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

html, body {
  height: 100%;
}

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:0 10px;
  font-size:16px;
}

h1, h2, h3 {
  font-family: "Signika Negative", sans-serif;
  margin: 10px 0 10px 0;
  color:#f3f2ef;
}

h1 { 
  font-size:36px;
}

h2 {
  font-size:30px;
}

h3 {
  font-size:24px;
}

p{
  line-height:22px;
  margin-bottom:16px;
  width:650px;
}

#demo {
  height:100%;
  position:relative;
}
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin:4px;
  display:inline-block;
  background:grey;
}

.green{
  background-color:#6fb936;
}

.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}

console.clear();
console.log(TweenLite.version);
// *note TimelineLite.staggerTo() and TimelineMax.staggerTo() use identical syntax.
var tl = new TimelineMax(); 
tl.staggerTo(".box", 1, {
  cycle:{
    //an array of values
    backgroundColor:["red", "white", "#00f"],
    //function that returns a value
    y:function(index){
      console.log(index)
      return index * 20;
    }
  }
}, 0.5);

/* The cycle property is available in:

TweenMax.staggerFromTo()
TweenMax.staggerFrom()
TweenMax.staggerTo()
TimelineLite.staggerFromTo()
TimelineLite.staggerFrom()
TimelineLite.staggerTo()
TimelineMax.staggerFromTo()
TimelineMax.staggerFrom()
TimelineMax.staggerTo()

*/