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