<div class="gasp__container">
  <div class="box">
    <div class="item"></div>
  </div>
</div>

<div class="action">
  <button id="play">Play</button>
  <button id="restart">Restart</button>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gasp__container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.box {
  border: 1px dashed #f36;
  width: 20vh;
  height: 20vh;
}

.item {
  width: 100%;
  height: 100%;
  background-color: #f36;
}

.action {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 320px;
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  margin: 5vh 2vh;
  border: none;
  background-color: #00a8ff;
  color: #fff;
  font-size: 18px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: 0.3s linear;
  padding: 2vh 5vh;
}

button:hover {
  transform: rotateX(15deg);
  box-shadow: 0 0.2em 0.5em #00a8ff;
}

button:nth-child(2) {
  background-color: #ff5722;
}

button:nth-child(2):hover {
  box-shadow: 0 0.2em 0.5em #ff5722;
}

const playAni = document.getElementById("play");
const restartAni = document.getElementById("restart");

gsap.config({
  autoSleep: 60,
  force3D: true,
  nullTargetWarn: false,
  units: { x: "vw", y: "vh" }
});

const tween = gsap.from(".item", {
  opacity: 1,
  x: 10,
  y: -30,
  rotate: 45,
  duration: 1,
  paused: true
});

const tween2 = gsap.to(".item", {
  opacity: 1,
  x: -30,
  y: 0,
  rotate: 0,
  borderRadius: "50%",
  backgroundColor: "rgb(42 173 210)",
  duration: 4,
  delay: 1,
  paused: true
});

playAni.addEventListener("click", () => {
  tween.play();
  tween2.play();
});

restartAni.addEventListener("click", () => {
  tween.restart();
  tween2.restart();
});