<div class="section">
  <div class="box green"></div>
  <div class="box purple"></div>
  <div class="box orange"></div>
  <div class="box purple"></div>
  <div class="box green"></div>
</div>
<h3>Click a box to transition out</h3>

body {
  overflow: hidden;
}
.section {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  height: 100vh;
}

h3 {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
}

.box {
  cursor: pointer;
  opacity: 0;
}

gsap.to(".box", {
  duration: 1,
  rotation: 360,
  opacity: 1, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "sine.out", 
  force3D: true
});

document.querySelectorAll(".box").forEach(function(box) {
  box.addEventListener("click", function() {
    gsap.to(".box", {
      duration: 0.5, 
      opacity: 0, 
      y: -100, 
      stagger: 0.1,
      ease: "back.in"
    });
  });
});