Animation with a purpose: our checklist

Every animation has a reason

Guide attention, give feedback, create hierarchy, tell a story. If an animation does none of these, we remove it.

Only transform and opacity

Animating properties like width or top forces the browser to recalculate layout. Transform and opacity are handled by the GPU.

gsap.from(el, { yPercent: 110, opacity: 0, ease: "expo.out" });

Respecting people who prefer less motion

With prefers-reduced-motion we turn off parallax, pinning and smooth scroll. The content stays the same; only how it appears changes.