GSAP motion that feels premium and stays fast.

Premium motion is mostly restraint. It has a clear purpose — guiding attention, explaining a relationship, confirming an action — and it gets out of the way quickly.

• Fast in, gentle settle: strong ease-outs (such as expo.out or power3.out) feel responsive and calm.
• Short durations for interface feedback (roughly 0.2–0.4s), longer for large entrances (around 0.8–1.4s).
• Small distances: content rising 20–40px reads as polished; content flying across the screen reads as busy.
• Stagger groups so the eye can follow, but keep the total sequence short.

Define your eases, durations and distances once and reuse them everywhere, the same way you treat colour and type. When every section uses the same vocabulary, the site feels designed as a whole.

// motion tokens
export const ease = { out: "expo.out", inOut: "power2.inOut" };
export const dur = { quick: 0.3, base: 0.9, slow: 1.4 };
export const rise = 32; // px for entrance reveals

Data attributes are a useful pattern on top of tokens: mark an element with data-reveal="fade-up" and let one shared script handle it. Pages then get consistent motion without per-page animation code.

Browsers can animate transform and opacity cheaply. Animating width, height, top, left or margins forces layout work on every frame and is the most common cause of janky motion.

• Animate x, y, scale, rotate and opacity — or autoAlpha, which also toggles visibility.
• Use will-change sparingly, and only on elements that are about to animate.
• Defer heavy media and start video only when it is in view.
• Test on a mid-range phone, not only on a fast laptop.
• Load only the GSAP plugins each page actually uses.

ScrollTrigger makes it easy to pin sections and scrub timelines with the scrollbar. Used well, it tells a story in chapters; used everywhere, it makes a page feel like a trap.

1. 01Give each pinned scene one idea to explain.
2. 02Keep pinned distances modest so readers never feel stuck.
3. 03Add a little smoothing to scrubbing (for example scrub: 0.6–1) so motion feels fluid rather than mechanical.
4. 04Make sure the content still makes sense if the reader scrolls fast or jumps with the keyboard.
5. 05Recalculate on resize, and check every scene at narrow widths.

In React, animations must be created after the elements exist and cleaned up when components unmount or routes change — otherwise you get duplicated tweens and stray ScrollTriggers. The official useGSAP hook from @gsap/react handles this by scoping selectors to a container and reverting everything it created on cleanup.

gsap.matchMedia() is the other essential tool. Wrap animations in media queries so they only run where they should — and are reverted automatically when the condition stops matching.

Some people experience discomfort or nausea from movement on screen and ask their operating system to reduce motion. Respect that setting by checking prefers-reduced-motion and serving a calm version: content visible immediately, no parallax, no scrubbed scenes, and simple fades at most.