orchestrating-motion-language

A unified motion system enforces consistent GSAP animations by managing reusable motion tokens for durations and easing, orchestrating timelines, and restricting property animations to `transform` and `opacity` for optimal performance.

An accessible GSAP animation system automatically respects `prefers-reduced-motion` settings by adjusting or disabling animations, ensuring the interface remains fully usable for users with motion sensitivities without manual overrides.

Orchestrating complex GSAP timelines for page transitions involves structuring entrance and exit patterns with clear start and end points, utilizing `gsap.context()` to manage scope and ensure proper animation cleanup.

This motion design approach works with React and other frontend frameworks by utilizing `gsap.context()` for cleanup, which prevents memory leaks during component unmounting and ensures smooth, predictable UI animations.

Animating only `transform` and `opacity` properties in GSAP leverages GPU hardware acceleration, which prevents layout thrashing and ensures your web animations maintain a consistent 60fps performance.

Preventing memory leaks when managing GSAP timelines in React components requires wrapping animations in `gsap.context()`, allowing the motion system to automatically revert and clean up all associated timelines when the component unmounts.