SKILL.md
Motion & Animation
Motion should communicate state and spatial relationships — never decorate.
- 12 Principles of Animation (Disney → UI): Especially easing, anticipation, follow-through, and staging applied to interface transitions. Motion should feel physical and intentional.
- Easing & Spring Physics: Natural motion uses ease-out for entrances (decelerate in) and ease-in for exits (accelerate out). Spring-based motion (stiffness/damping) reads more physical than fixed-duration curves.
- FLIP Technique: First, Last, Invert, Play — performant layout animations by measuring start/end and animating transforms, not layout-triggering properties (width/height/top/left).
- Motion as Feedback: Animation should communicate state change and spatial relationships, never decorate. If it doesn't clarify, cut it.
How to apply
- Entrances ease-out, exits ease-in; asymmetric durations read more natural than symmetric.
- Animate only
transformandopacityto stay on the compositor and hold 60fps — use FLIP for layout moves. - Prefer springs for interactive, gesture-driven motion; fixed curves for deterministic state transitions.
- Respect
prefers-reduced-motion— provide a reduced/instant fallback for every non-essential animation. - Before adding motion, ask what it *communicates*. No answer → don't animate.