index.html

<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.markdown

loop through collection

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

A Pen by GreenSock on CodePen.

License.

script.js

$(".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
    

  
*/

style.css

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;
}