GSAP

A playground for GSAP animations

Each sample is a client component that animates inside useGSAP() from @gsap/react, which reverts its tweens and ScrollTriggers when the component unmounts. In development, the ScrollTrigger markers show where each animation starts and ends.

Perspective and parallax

ScrollTrigger scrubs a single custom property, --translateX, from 0 to 1. Each row multiplies it by its own --speed, so the two rows drift at different rates inside a 3D-rotated frame (from my CodePen). Scroll down.

Claim

A claim too wide for its frame slides in from the right as you scroll, until its end meets the frame’s right edge. Start and end depend on the text and frame width, so they are recalculated on every ScrollTrigger refresh (from my CodePen).