What problem does it solve? Interfaces often suffer from arbitrary animation decisions: motion added because it looks nice, inconsistent durations, wrong easing curves, and broken reduced-motion fallbacks. This Skill provides a single authoritative foundation for deciding when to animate, how long animations should last, which curves to use, and how to handle accessibility and performance constraints. ## Core Features & Use Cases - Decision framework for animation: Five legitimate reasons to animate (continuity, causality, orientation, feedback, character) plus explicit rules for when not to animate, such as repeated actions, error states, and time-critical tasks. - Timing and easing reference: Duration tables from 100ms micro-feedback to 600ms page transitions, guidance on ease-out defaults, spring physics for gesture-driven motion, and concrete cubic-bezier starting points. - Accessibility and performance rules: Mandatory prefers-reduced-motion handling that preserves state changes while removing displacement, plus GPU-friendly transform/opacity patterns and warnings against animating layout properties. - Use Case: Before building a modal entrance animation, consult this Skill to pick a 250-400ms duration, an ease-out curve, a short 8-24px travel distance, and a reduced-motion fallback that keeps a simple fade. ## Quick Start Ask the agent to review or plan the animations for a component using the motion principles before writing any GSAP or CSS transition code.
