<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 = new TimelineMax({repeat:6, yoyo:true, paused:true});

tl.to(".green", 1, {x:200})
  .to(".orange", 1, {x:200, scale:0.2})
  .to(".grey", 1, {x:200, scale:2, y:20}, "greyAndPink") 
  .to(".pink", 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();

External CSS

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

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js