<body>
  <div class="box green"></div>
  <div class="box purple"></div>
  <div class="box blue"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js" integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.box{
  position:absolute;
  height:100px;
  width:100px;
  border-radius:20px;
}
.green{
  background-color:green;
  left:10%;
}
.purple{
  background-color:purple;
  left:10%;
  top:110px
}
.blue{
  background-color:blue;
  left:10%;
  top: 220px;
}

gsap.to(".green", {rotation: 360, x: 100, duration: 1});
gsap.from(".purple", {rotation: -360, x: -100, duration: 1}); 
gsap.fromTo(".blue", {x: -100},{rotation: 360, x: 100, duration: 1});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.