<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>
<h3>Press restart() and then any timeScale() button to change the speed while the animation is playing</h3>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box pink"></div>
<div class="message"></div>
   
  <div class="nav">
    <button id="restart">restart()</button>
    <button id="timeScale02">timeScale(0.2)</button>
    <button id="timeScale1">timeScale(1)</button>
    <button id="timeScale4">timeScale(4)</button>
  </div>

/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

body {
  margin:10px;
}

.box {
  display:block;
}

button {
  text-transform:none;
}

.pink {
  background-color:pink;
}

.message{
  margin:10px;
  color:#ddd;
}

var play = document.querySelector("#restart");
var timeScale = document.querySelector("#timeScale02");
var timeScale = document.querySelector("#timeScale1");
var timeScale = document.querySelector("#timeScale4");
var message = document.querySelector(".message")


var tl = gsap.timeline({repeat: 6, yoyo: true, paused: true});

tl.to(".green", {duration: 1, x: 200})
  .to(".orange", {duration: 1, x: 200, scale: 0.2})
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20}, "greyAndPink") 
  .to(".pink", {duration: 1, x: 200, rotation: 360}, "greyAndPink"); 

restart.onclick = function() {
  tl.restart();
  showTimeScale();
}

timeScale02.onclick = function() {
  tl.timeScale(0.2); //animation will play at 20% normal speed (slower)
  showTimeScale();
}

timeScale1.onclick = function() {
  tl.timeScale(1); //animation will play at normal speed
  showTimeScale();
}

timeScale4.onclick = function() {
  tl.timeScale(4); //animation will play 4 times normal speed (faster)
  showTimeScale();
}

function showTimeScale() {
  message.innerHTML = "Current timeScale is " +  tl.timeScale(); // get the current timeScale
}

showTimeScale();