<div class="box box1 green"></div>
<div class="box box2 orange"></div>
<div class="box box3 purple"></div>

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

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

.box {
  display: block;
}

.pink {
  background-color: pink;
}

var tl = gsap.timeline({delay: 2});
//sequenced one-after-the-other
tl.to(".box1", {duration: 2, rotation: -360})
  .to(".box2", {duration: 1, x: -100, ease: 'elastic.out'})
  .to(".box3", {duration: 2, rotation: 360, x: 100, ease: 'expo.out'});