domains / families / design / animation-principles

animation-principles

separate

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

When to use

• tuning how an animation feels
• applying easing principles
• applying staging principles
• applying follow-through principles
• making interfaces feel natural
• guiding attention
• communicating state changes

When not to use

• product-wide duration and easing tokens
• full interaction spec

Skill page

Source