<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>


<p>Click a box to transition out</p>
body {
  margin: 10px;
}

.box {
  display:flex;
  cursor: pointer;
  width:50px;
  height:50px;
  margin-bottom:20px;
  background:teal;
}
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.2,
      ease: "back.in"
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js