<div class="box green"></div>
<div class="nav">
    <button id="restart">play again</button>

    <button id="invalidate">invalidate and play again</button>

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

body{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction: column; gap: 2rem}

button {
  display:inline;
}
var t = gsap.to(".green", {duration: 1, x: "+=100"});

document.querySelector("#restart").addEventListener("click", function() {
  t.restart();
});

document.querySelector("#invalidate").addEventListener("click", function() {
  t.invalidate();
  t.restart();
});

External CSS

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

External JavaScript

  1. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js