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:

• entering: decelerate into place;
• exiting: leave decisively;
• reversible interaction: use symmetric behavior where appropriate;
• spring behavior only when elasticity communicates the interaction.

Avoid exaggerated bounce, long overshoot, and unrelated easing families in the same system.

Choreography

• animate hierarchy, not every DOM node;
• prefer parent/child choreography over independent random delays;
• preserve the user’s point of reference during route, drawer, modal, list, and detail transitions;
• avoid simultaneous competing focal points;
• scrolling effects must not impair reading, navigation, or input.

Implementation Constraints

Prefer compositor-friendly transform and opacity. Treat layout animation, blur, filters, large shadows, continuous canvas/WebGL, and scroll handlers as explicit performance decisions. Measure when motion is persistent or complex.

Do not introduce an animation library when CSS/Web Animations or the project’s existing motion primitive is sufficient.

Accessibility

Support prefers-reduced-motion. Reduced motion must preserve state communication rather than simply deleting all feedback. Avoid parallax/zoom/intense movement that can create discomfort. Never make content comprehension depend on animation.

Responsive Motion

Mobile may need shorter travel, simpler choreography, fewer simultaneously animated layers, and removal of hover-only behavior. Touch feedback should not depend on pointer hover.

Verification

Inspect the real rendered interaction at normal and reduced motion. Test repeated triggers, rapid interaction, cancellation, route changes, slow devices when relevant, and state correctness after animation finishes.

Related Skills

• skill-design-engineering-craft
• skill-open-design-ui
• skill-premium-web-experience
• skill-frontend-ux-guardrails