<h1>Any animation with an "id" shows up in the drop-down menu (lower left).</h1>
<h3>A timeline animates the green and orange boxes</h3>
<div class="box green"></div>
<div class="box orange"></div>
<h3>A separate tween 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;
}

//give the timeline and child tweens their own id.
var tl = gsap.timeline({id:"timeline"})
tl.to(".orange", {duration: 1, x: 700, id: "orange"})
  .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"});

//give this tween an id
gsap.to(".grey", {duration: 1, x: 700, rotation: 360, delay: 3, id: "grey"})

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

//GSDevTools will control all animations on the Global Timeline and provide access via the drop-down menu to any animation with an id.