<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>


  <div class="box green"></div>
   
  <div class="nav">
    <button id="play">play()</button>
    <button id="pause">pause()</button>
    <button id="resume">resume()</button>
    <button id="reverse">reverse()</button>
    <button id="restart">restart()</button>
  </div>

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

body {
  margin: 10px;
}

button {
  text-transform: none;
}

var tween = gsap.to(".green", {
  duration: 4, 
  x: 750, 
  rotation: 360, 
  ease: "none", 
  paused: true
});

// click handlers for controlling the tween instance...
document.querySelector("#play").onclick = () => tween.play();
document.querySelector("#pause").onclick = () => tween.pause();
document.querySelector("#resume").onclick = () => tween.resume();
document.querySelector("#reverse").onclick = () => tween.reverse();
document.querySelector("#restart").onclick = () => tween.restart();