<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<div id="demo">
    <div class="box green"></div>
    <div class="box grey"></div>
    <div class="box orange"></div>
    <div id="controls">
      <button id="play">play</button>
      <button id="pause">pause</button>
      <button id="reverse">reverse</button>
    </div>
</div>

html, body {
  height: 100%;
}

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:0 10px;
  font-size:16px;
}

h1, h2, h3 {
  font-family: "Signika Negative", sans-serif;
  margin: 10px 0 10px 0;
  color:#f3f2ef;
}

h1 { 
  font-size:36px;
}

h2 {
  font-size:30px;
}

h3 {
  font-size:24px;
}

p{
  line-height:22px;
  margin-bottom:16px;
  width:650px;
}

#demo {
  height:100%;
  position:relative;
  overflow:hidden;
}
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
}

.green{
  background-color:#6fb936;
}

.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}


#controls {
  position:absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
}

button {
  padding:10px;
  margin:0 5px;
}

var tl = new TimelineLite();
tl.staggerTo(".box", 1, {rotation:360, x:600}, 0.5);



$("#play").click(function(){
  if(tl.progress() < 1){
    tl.play();
  } else {
    tl.restart();
  }
})

$("#pause").click(function(){
  tl.pause();
})


$("#reverse").click(function(){
  if(tl.progress() > 0){
    tl.reverse();
  } else {
    tl.reverse(0); //reverses from the end
  }
})