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