<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

body {
  margin-top: 50px;
  text-align: center;
}

.box {
  display: inline-block;
  margin-right: 5px;
}

.pink {
  background-color: pink;
}
var yMove = 50;
gsap.to(".box", {
  delay: 0.5,
  duration: 1,
  y: function(i, elem, boxes) {
    return i % 2 === 1 ? -yMove : yMove;
  }
});
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js