A Carnival GSAP Animation Playground

This note is the one noisy midway in the archive: scroll rides, balloon pops, confetti bursts, and demo panels built for the pleasure of seeing them move.

The fence matters. GSAP loads only here, and every effect is wired to this page’s markup instead of the global layout or the notes archive.

Prologue: admission booth#

Before Act one opens the gates, the ticket booth sets the rules: one page, one GSAP load, no spill into the rest of the archive.

The pattern is deliberately narrow: scope the animation runtime to the page, keep a reduced-motion fallback, use scroll-linked motion only where it clarifies the interface, and leave the surrounding site alone.

The marquee keeps selling rides, SplitText breaks the admission title into characters when the kicker scrolls into view, and SortableJS lets you rearrange the passes in the sticker zone. The choreographed entrance and scroll track begin in Act one, just below the midway map.

Act one: the gates open#

Act one starts with entrance tweens on the hero panel: looping neon beams, staggered signal lines, and an overhead path that DrawSVGPlugin traces once on load before MotionPathPlugin sends the cars around it. Core GSAP here: tweens, timelines, stagger, and motion along a path before scroll takes the wheel.

The prologue marquee and draggable passes stay behind you; this booth is the automatic overture. In Act four, the map booth redraws the same drawing trick on demand when you press Draw route: same plugin, different job.

Act two: scroll is the ride track#

GSAP’s real fairground trick is ScrollTrigger: scroll becomes a track instead of a trigger. Values scrub with the bar, sections pin while a timeline plays through, and a ferris wheel earns extra rotation when you lean into the scroll. The booth row below bobs with the same scrub, decoration only, like the rest of the stall row. No app shell required; a longer page and a patient timeline are enough.

Act three: pin the moment#

Some scenes read better when the page holds them in place. Pin a section, scrub a nested timeline, and three face-down cards can shuffle like a monte game before you pick one, or scroll on and leave the prizes hidden.

Act four: draw the map#

A carnival is easier to read with a map. The overhead track in Act one traced itself on load; press Draw route and DrawSVGPlugin redraws the midway wiring on demand: gate, prize spur, exit, while the operator ledger updates like a clipboard waking up.

Act five: ride the row sideways#

Vertical scroll can drive horizontal motion. Pin the stall row, remap scroll distance onto an x tween, snap between cards, and the midway glides past like a slow carousel while the document remains a document.

Act six: depth without leaving the page#

Parallax gives flat art a little depth when each layer drifts at a different scrub rate. The depth meter beside the rings reports how far back, mid, and front shift. Far layers drag, near layers race, while the page stays one static document behind the fence.

Act seven: under the big top#

The big top is the one booth on the route GSAP does not run. The carnival glow behind the tent is raw canvas, painted frame by frame from a plain requestAnimationFrame loop, a per-pixel light field a tween engine was never built to push. GSAP still works the edges of the tent: a single tween redraws the SVG flag into a steady sine-wave flutter, and CSS ribbons ride ScrollTrigger. But the glow itself is the honest beat: the place where a self-running pixel field belongs in the loop, not the timeline.

Act eight: the barker booth#

Text gets a booth of its own. TextPlugin types the pitch on scroll, ScrambleTextPlugin decodes the prize board on click, MorphSVGPlugin reshapes a prize icon between three states, and CSSRulePlugin pulses the glow behind the letters. Typography as sideshow.

Act nine: pop, burst, and float#

The payoff booth is loud on purpose. Physics2DPlugin and PhysicsPropsPlugin throw confetti with gravity and spin; the balloon booth squashes each hit with CustomWiggle (noteWiggle) then bursts it with CustomBounce (noteBounce).

Act ten: throw for the prize rack#

A carnival should have one booth you can grab, throw, and trust to keep moving after your hand lets go. Draggable handles the ring, InertiaPlugin carries the flick, and the target check waits until the throw settles before awarding a prize.

Act eleven: shuffle the prize shelf#

When the DOM reorders, users notice the jump unless you capture state first. Flip records positions, shuffles the shelf, and animates the return trip so the prizes feel like they slid instead of teleported. That is layout-aware reordering, not just card flips like the pinned monte in Act three.

Act twelve: reading the room#

Observer listens for velocity and pointer drift. Pair that with scrubbed counters and a scroll progress bar, and the page starts reporting how fast you move through the story: a ticket booth dashboard for the curious.

Act thirteen: the crowd arrives in waves#

The last entrance comes in groups. ScrollTrigger.batch reveals stalls in small waves as you scroll, stagger without writing a separate timeline for each card.

Curtain call#

On a personal site, motion earns its keep in small doses: one memorable moment, a proof of craft, a sketch that reads better in motion. Fence the heavy stuff to a single note and the rest of the archive stays calm.

Make the default experience quiet. Then choose one page where the house lights come up, the confetti flies, and the tiny ideas spin around when someone asks for fun. This is that page. Thanks for riding, and a curtain-call bow to the crew that ran the show. GSAP drove every tween and timeline; ScrollTrigger cued the scroll-linked reveals and pinned panels; SplitText shattered the admission title into characters; DrawSVG inked the coaster rail; MotionPath sent the little cars around the track; Draggable and InertiaPlugin threw the ring; Flip eased the cards back into place whenever the deck got reshuffled; and canvas-confetti threw the bursts. The one effect GSAP sat out is the big top's glow: a raw canvas loop, because a self-running light field wants a render loop, not a timeline. Sometimes the better call is letting the animation library step aside.

If you landed here first, the same route still has more stops. Scroll up, open the midway map, and jump back to any act or booth you skipped. The demos stay wired; you do not need to leave the page to try another trick.