​

<div class="container">

  <div class="flair flair--25"></div>

  <div class="nav light">

  <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>

</div>

​

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

​

body {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  flex-direction: column;

}

​

button {

  text-transform: none;

  margin: 0.25rem;

}

​

.nav.light {

  padding-top: 2rem;

  background-color: transparent;

  display: flex;

  flex-wrap: wrap;

  justify-content: center

}

​

let nav = document.querySelector('.nav')

​

let tween = gsap.to(".flair", {

  duration: 2, 

  x: () => nav.offsetWidth, // animate by the px width of the nav

  xPercent: -100, // offset by the width of the box

  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();