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

body {
  margin: 10px;
}

.box {
  display: block;
}

.pink {
  background-color: pink;
}
//create a TimelineMax and make it repeat 3 times with 1 second between iterations
var tl = gsap.timeline({repeat: 3, repeatDelay: 1});

tl.to(".green", {duration: 1, x: 200})
  //start 1 second after previous tween ends (gap)
  .to(".orange", {duration: 1, x: 200, scale: 0.2}, "+=1")
  //add a label at the end
  .addLabel("greyAndPink")
  //start both of these animations at the same time, at the "greyAndPink" label.
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20}, "greyAndPink") 
  .to(".pink", {duration: 1, x: 200, rotation: 360}, "greyAndPink"); 

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