Modal · GSAP playground

Drag me. Click me.

GSAP playground

Modal animated entirely with GSAP. Eyes track your cursor via gsap.quickTo. Drag him with Draggable + inertia. Click for sequenced timelines with elastic.out. Scroll the page — he reacts.

Reactions

What GSAP buys us

Smoother motion. quickTo handles cursor tracking with built-in interpolation. Real spring physics. elastic.out ease overshoots and settles like a slime. Sequenced timelines. Each action is a labeled timeline — anticipation, action, settle — predictable and tweakable.

Try also

Move your cursor — eyes follow. Drag Modal — he stretches toward your cursor and springs back. Click — squash + jump + settle. Scroll down — Modal reacts to scroll position via ScrollTrigger.

Section 1 · scroll trigger

Scroll, and he watches.

Modal is fixed in the hero above. As you scroll past him, his eyes look down. As you scroll back, they look up. ScrollTrigger handles the position math — we just say "when this section enters the viewport, eyes go down."

Section 2 · band ripple

The body band ripples.

When this section enters view, Modal's body band shows a one-pixel pulse traveling left to right — like a heartbeat. ScrollTrigger fires the timeline. repeat: -1 keeps it running while this section is visible.

Section 3 · spontaneous joy

Stars when he's seen.

Five small Carbon stars puff up around his head. Stagger 90ms apart. elastic.out(1, 0.5) on the scale, power2.in on the fade-out. He bounces once.