<h1>Animations are placed on the Global Timeline, controlled by GSDevTools</h1>
<h3>A timeline animates the green and orange boxes</h3>
<div class="box green"></div>
<div class="box orange"></div>
<h3>A separate timeline tween animates the grey box</h3>
<div class="box grey"></div>

/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

body {
  margin:10px;
}
.box {
  position:relative;
  display:inline-block;
}
h1 {
  font-size:24px;
}

h3 {
  font-size:18px;
  font-weight: 300;
  color:#ccc;
}

//timeline animates green and orange
var tl = gsap.timeline()
tl.to(".orange", {duration: 1, x: 700})
  .to(".green", {duration: 2, x: 700, ease:"bounce"})

//separate tween with a delay which makes it play after the timline
gsap.to(".grey", {duration: 1, x: 700, rotation: 360, delay: 3})

//instantiate GSDevTools with default settings
GSDevTools.create();

// GSDevTools will control all animations on the Global Timeline