<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", {duratoin:1, x:700, id:"orange"})
  .to(".green", {duratoin:2, x:700, ease:"bounce", id:"green"});

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

//instantiate GSDevTools with default settings
GSDevTools.create({id:"Step 2"});

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

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js