​

​

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

    });

  });

});