<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box pink"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box pink"></div>

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

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

body {
  margin: 10px;
}

.box {
  cursor: pointer;
}

.pink {
  background-color: pink;
}

gsap.from(".box", {
  duration: 2,
  scale: 0.5, 
  opacity: 0, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "elastic", 
  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"
    });
  });
});