GSAP Stagger Animation
Boxes that drop in with rotation and elastic easing in a staggered sequence, powered by GSAP.
Requires GSAP. Add the CDN tag below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes it.<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script><div class="gs-stage"><div class="gs-box" id="b1"></div><div class="gs-box" id="b2"></div><div class="gs-box" id="b3"></div></div>
<button class="gs-btn" id="play">Replay animation</button>body{background:#0d1426;flex-direction:column;gap:24px}
.gs-stage{display:flex;gap:18px}
.gs-box{width:64px;height:64px;border-radius:16px}
#b1{background:#ff7a18}#b2{background:#ff477e}#b3{background:#5b6cff}
.gs-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a2540;border:0;border-radius:10px;padding:11px 22px;cursor:pointer}function play(){gsap.from('.gs-box',{y:-80,opacity:0,rotation:180,duration:.9,ease:'back.out(1.7)',stagger:.15});}
document.getElementById('play').onclick=play;play();Free to use.This component uses GSAP (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.