Libraries like GSAP shine at orchestration: timelines, staggers, and scrubbing that are painful to hand-roll. This is a vanilla timeline player demonstrating the feature you're really paying for.
const tl = gsap.timeline();
tl.from('.bar', {
scaleY: 0,
transformOrigin: 'bottom',
opacity: 0,
duration: 0.5,
ease: 'back.out(1.7)',
stagger: 0.09, // ← the killer feature
});
// tl.pause(); tl.seek(0.5); tl.reverse(); ← free scrubbing & control
The scrubber above drives a hand-written timeline. Re-implementing seek/reverse/stagger/eases robustly is exactly the work GSAP/anime/Motion save you.
| Tool | Best at | Reach for it when |
|---|---|---|
| CSS / WAAPI | simple state transitions, hovers, loaders | one-shot motion, no orchestration, smallest footprint |
| SMIL | self-contained portable icon animation | animation must travel inside the .svg file |
| GSAP | complex timelines, scrub, MorphSVG, MotionPath | sequenced, interactive, production motion |
| anime.js | lightweight timelines & staggers | GSAP-like ergonomics, smaller bundle |
| Motion | spring physics, React/component motion | declarative component animation, gestures |
Rule of thumb: CSS/SMIL until you need a timeline (sequencing, stagger, scrub, reverse) — then a library earns its bytes.