<div class="demo">
  <div class="transform">&nbsp;</div>
  <div class="box green" id="greenBox">&nbsp;</div>
  
</div>
<div class="nav">
  <button id="next">next</button> 
</div>

body {
  font-family:sans-serif;
  background-color:#1d1d1d;
}

.demo {
  width:100%;
  height:200px;
}

.box {
  width:100px;
  height:100px;
  position:relative;
  left:50%;
}

.green {
  background-color:#86CC01;
}

.transform {
  line-height:40px;
  color:#777;
  text-align:center;
 
}

.nav {
  width:100%;
  text-align:center;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

button {
  padding:15px;
  margin:15px;
}

var tl = new TimelineLite({paused:true}),
    box = $(".green"),
    text = $(".transform")
    next = $("#next")

TweenLite.set(box, {xPercent:-50, scale:0.5})


tl.set(text, {text:"scale"})
  .to(box, 0.3, {scale:1})
  .addPause()
  
  .set(text, {text:"rotation"}, "+=0.1")
  .to(box, 0.3, {rotation:360})
  .addPause()

  .set(text, {text:"skewX"}, "+=0.1")
  .to(box, 0.3, {skewX:-30})
  //call a function as soon as the timeline is paused
  .addPause("+=0", function(){
    alert("skewX section complete")
  })

  .set(text, {text:"skewY"}, "+=0.1")
  .to(box, 0.3, {skewY:-30, skewX:0, y:10})
  .set(next, {autoAlpha:0})
  
next.click(function() {
  tl.play();
})

/* This Pen Loads the Following
  jQuery: latest version
  TweenMax: latest version
    -TweenLite
    -TweenMax
    -TimelineLite
    -TimelineMax
    -CSSPlugin
    -BezierPlugin
    -DirectionalRotationPlugin
    -AttrPlugin
    -RoundPropsPlugin
    -EasePack
  TextPlugin  
  Please use the minimal amount of code possible to recreate the problem you are experiencing.
  
*/

$("#restart").on("click", function() {
  tl.restart();
})