GSAP Ease Gallery — Free Easing Comparison Snippet

Easing is the most consequential decision in any animation — the same 1.8-second, same-distance movement reads as confident, playful, broken, or robotic purely from its curve. But eases are impossible to choose from documentation graphs. This gallery makes them physical: nine balls race identical lanes over identical durations, differing *only* in ease — the core families plus EasePack's exotic rough() and slow() — with a race-all button and per-lane replays.

Identical everything except the curve

Every lane's tween is fromTo(ball, { x: 0 }, { x: dist, duration: 1.8, ease }). Distance is measured per lane (clientWidth − 38) so the race is fair at any container width. Because duration and distance are constant, all differences you see — the overshoot, the rubbery settle, the stutter — are pure easing. That controlled-experiment framing is what makes the gallery useful for *choosing*: you're comparing personalities, not implementations.

The core cast, briefly

power2.out is the workhorse UI ease (fast start, gentle landing); power4.inOut is its dramatic cousin with a violent middle. back.out(1.7) overshoots the target and returns — the parenthesized config is amplitude, tunable inline. elastic.out(1, 0.3) oscillates around the target like a plucked band (amplitude, period). bounce.out hits the end like a floor. circ.inOut is quarter-circle geometry — silkier than power curves at the extremes. steps(8) quantizes motion into eight discrete jumps, the sprite-sheet and mechanical-counter ease.

EasePack's exotics are the reason this file exists

rough({ strength: 2, points: 24, taper: 'out', randomize: true }) perturbs an underlying ease with jitter — the flickering-candle, damaged-machine, glitch ease; taper: 'out' calms it near the finish. slow(0.7, 0.7, false) rushes in, moves *almost not at all* through a long middle plateau, then rushes out — the slow-motion-highlight ease used for text flybys (its third parameter can even yoyo the value back). Both ship in EasePack, loaded as one extra CDN script and available by string name with zero registration.

Config-in-the-string is the underrated feature

back.out(1.7), elastic.out(1, 0.3), steps(8), rough({...}) — GSAP parses ease configuration from the string itself, so an ease choice (with tuning) is *data*, not code. This gallery exploits that: the entire lineup is an array of strings, and your production code can store ease choices in config, CMS fields, or design tokens the same way.

killTweensOf keeps replays honest

Clicking a lane mid-race kills that ball's tween and restarts from zero — the standard interrupt-safety idiom — so you can spam-compare two lanes rhythmically, which is genuinely the fastest way to feel the difference between, say, back and elastic settles.

What's deliberately absent

No curve graphs: graphs describe eases the way sheet music describes a song. Motion is the medium; judge eases by watching the balls. For designing *custom* curves, GSAP's CustomEase draws them as SVG paths — with CustomBounce and CustomWiggle as its generators.

Customizing it

Add lanes to the EASES array (name, ease string, color), race y-axis drops instead, or wire lane clicks to copy the ease string. Related: bounce physics in custom bounce ball, oscillation in custom wiggle icons, curve editing in bezier curve editor, and CSS-side timing in css animation generator.