<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()
*/
This Pen doesn't use any external CSS resources.