Export
Reduced motion
A reduced-motion export pins everything that moves the element through space (the transform properties and a motion path's distance) where it ends, since that's what vestibular guidance is about. Opacity, filters and color still animate, so the animation still says something once nothing travels.
- Watch it before you export it
- ⌘K “Preview reduced motion” plays the stage the way a visitor who asked their system for less movement sees it: travel gone, fades kept. It only changes the preview. The document and the export stay as they are, and the same command turns it off.
- Pinned, shortened, started at once
- Travel is pinned to its resting value, not dropped: dropping an x track would leave an element that was meant to finish 100px across in the wrong place. Opacity and filters last at most 150ms, lose their springs, and start at once instead of waiting their turn. Color tracks are kept as they are.
- What each dialect writes
- CSS appends a
prefers-reduced-motionblock with the same selectors. Motion addsuseReducedMotion()to your component and picks each element’s props per render, including a scene with picked parts. GSAP wraps a single element ingsap.matchMedia(), which reverts its tweens if the setting changes mid-session; a GSAP scene says how to do the same. - What survives
- An element that rose 24px and faded in becomes an element that fades in. It still tells you something arrived, without moving to say so. The variant is generated from the same document, so it can’t drift from the animation it replaces.
- Why not just skip the animation
- An element that appears instantly loses the signal that it appeared at all. Reduced motion is a request for less vestibular movement, not for less feedback.