GSAP ScrollTrigger Patterns I Actually Use

Parallax that does not hurt performance

The key is animating only transform and opacity — compositor-only properties. Set will-change: transform on the element before the timeline starts, and remove it in the onComplete callback so the browser can free the layer.

Pinned scroll sequences

Pin a container, then scrub a timeline against scroll progress. The mental model: the timeline is your storyboard, scroll position is the playhead. Keep each pinned section under 300vh or users on short screens will feel trapped.

Respecting prefers-reduced-motion

Check window.matchMedia("(prefers-reduced-motion: reduce)").matches before registering any ScrollTrigger. If it matches, skip the animation entirely — do not just make it faster. Instant state changes are always accessible; subtle motion is not always welcome.