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

body {
  margin: 10px;
}

.box {
  display: block;
}

#output {
  color: #eee;
}
var output = document.querySelector("#output");

gsap.to(".green", {
  duration: 2,
  x: 300,
  onStart: showMessage, 
  onStartParams: ["the green div has started to move"], 
  onComplete: showMessage, 
  onCompleteParams: ["the green div is done moving"],
  delay: 1
});
gsap.to(".orange", {
  duration: 2,
  x: 300, 
  onStart: showMessage, 
  onStartParams: ["the orange div has started to move"], 
  onComplete: showMessage, 
  onCompleteParams: ["the orange div is done moving"],
  delay: 5
});

function showMessage(message) {
  output.innerHTML += message + "</br>";
}

External CSS

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

External JavaScript

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