CSS:
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-top:4px; display:inline-block } .green{ background-color:#6fb936; } .orange { background-color:#f38630; } .grey { background-color:#989898; }
Javascript:
TweenMax.staggerTo(".green", 1.5, {rotation:360, y:100, x: 50}, 0.5); //class="green" box ratate 360 degree to Y = 100, X = 50, every 0.5s, one green box start to move
TweenMax.staggerTo(".grey", 2, {rotation:720, y:150, x: 50}, 0.5);
The difference bewteen staggerTo() with to() method is that, staggerTo trigger element one by one, but to() trigger all elements at once.