9a53ea40128a573ce291

$(".box").each(function(index, element){
  TweenLite.from(element, 0.5, {x:(index+1) * 200, opacity:0, delay: index * 0.2})
})

/* This Pen Loads the Following
  jQuery: latest version
  TweenMax: latest version
    -TweenLite
    -TweenMax
    -TimelineLite
    -TimelineMax
    -CSSPlugin
    -BezierPlugin
    -DirectionalRotationPlugin
    -AttrPlugin
    -RoundPropsPlugin
    -EasePack
    

  
*/

<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>

loop through collection
-----------------------
Loads TweenMax and jQuery to enable the creation of hassle-free demos

A [Pen](http://codepen.io/GreenSock/pen/LgJEe) by [GreenSock](http://codepen.io/GreenSock) on [CodePen](http://codepen.io/).

[License](http://codepen.io/GreenSock/pen/LgJEe/license).

body {
  font-family:sans-serif;
}

h1 {
  margin: 5px 0;
}
h3 {
  margin:0;
  font-size:16px;
}
.demo {
  width:600px;
  height:120px;
  background-color:black;
}

.box {
  width:50px;
  height:50px;
  position:relative;
  margin-bottom:2px;
}

.red {
  background-color:red;
}

.blue {
  background-color:blue;
}

.nav {
  width:600px;
  background-color:#ccc;
  text-align:right;
}

button {
  padding:10px;
  margin:10px;
}