<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>


<h3>Click a box to transition out</h3>

@import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@400;600&display=swap");

body{display:flex;align-items:center;justify-content:space-around;min-height:100vh;
	font-family: "Signika Negative", sans-serif;}

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"
    });
  });
});