delay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<div id="bar"></div>
<div class="box" id="pink"></div>
<div class="box" id="purple"></div>
<div class="box" id="green"></div>
<div class="box" id="blue"></div>

CSS

.box {
  position: relative;
  float: left;
  margin-right: 10px;
  width: 75px;
  height: 75px;
}

#pink {
  background-color:pink;
}

#purple {
  background-color:purple;
}

#green {
  background-color:green;
}

#blue {
  background-color:skyblue;
}

JavaScript

var pink = document.getElementById("pink"),
  purple = document.getElementById("purple"),
  green = document.getElementById("green"),
  blue = document.getElementById("blue");
TweenLite.to([pink, purple, green, blue], 2, {
  scale: 0.5,
  opacity: 0.5
});