<h1>Animations are placed on the Global Timeline, controlled by GSDevTools</h1>
<h3>A TimelineLite animates the green and orange boxes</h3>
<div class="box green"></div>
<div class="box orange"></div>
<h3>A separate TweenLite 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 = new TimelineLite()
tl.to(".orange", 1, {x:700})
  .to(".green", 2, {x:700, ease:Bounce.easeOut})

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

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

// GSDevTools will control all animations on the Global Timeline

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=100