skill-motion-design-principles

Motion Design Principles

Use when animation or transition quality is itself part of the task. This skill decides whether motion should exist, what it communicates, and how it should behave.

Motion Has A Job

Every motion must do at least one of these:

• explain spatial relationship;
• preserve continuity;
• communicate state change;
• direct attention;
• confirm input;
• reveal hierarchy progressively;
• make causality understandable.

If it does none of them, remove it.

Review Model

For every animation define:

• trigger;
• user/system cause;
• element ownership;
• start and end states;
• duration;
• easing;
• delay/stagger;
• interruption/cancellation behavior;
• repeated-trigger behavior;
• reduced-motion fallback;
• performance risk.

Motion Posture

Choose the motion posture from product context before tuning individual animations:

• Restraint-first: productivity tools, admin surfaces, repeated controls and high-frequency actions. Prefer instant state change or very short transitions; animation must earn its cost.
• Production polish: default for consumer/product UI. Preserve continuity and hierarchy with subtle, consistent motion that does not call attention to itself.
• Expressive: low-frequency brand moments, onboarding, marketing or playful experiences where motion is part of the product character. Keep interaction clarity and interruption behavior intact.

Frequency is a gate: the more often an interaction is triggered, the stronger the case for shorter or no animation. Do not apply expressive motion rules to repetitive operational UI.

Timing

• Immediate feedback should feel immediate.
• Small local transitions should normally be shorter than navigation or large spatial transitions.
• Staggers must clarify order, not make users wait.
• Avoid chaining decorative entrances across an entire dashboard.
• Keep duration consistent by semantic role rather than assigning arbitrary values component by component.

Easing

Use easing to represent physical/interaction intent: