Motion Design

Motion Design Skill

When to Apply

Use this skill when:

• Creating UI animations (buttons, cards, modals, page transitions)
• Designing micro-interactions and feedback animations
• Building loading, success, or error states
• Animating illustrations or decorative elements
• Planning scroll-triggered or progress-based animations
• Establishing brand motion identity
• Choreographing multi-element sequences

Decision tree:

1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
2. Does it express brand personality? → Motion Personality archetypes
3. Does it tell a story or guide attention? → Disney principles + choreography
4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns

Quick Reference: 8-Step Checklist

Before creating any animation:

1. Emotional target? — joy, calm, urgency, elegance
2. Motion Personality? — Playful, Premium, Corporate, Energetic
3. Primary property? — position, scale, rotation, opacity
4. Duration? — see duration table below
5. Easing family? — entrance=decelerate, exit=accelerate
6. Hero element? — apply staging principles
7. Secondary + ambient layers? — add richness
8. 1/3 rules? — motion distance, simultaneous elements

Three Pillars (CRITICAL)

Every animation must satisfy three pillars before any technical decisions:

Three motion layers (flat animation = missing layers):

• Primary: Main action the viewer follows
• Secondary: Supporting richness (shadows, icons shifting)
• Ambient: Background life (gradients, subtle pulses)

Deep dive: director/core-philosophy.md

Motion Personality

Select ONE archetype per project. Apply consistently.

Default: Corporate for UI, Playful for illustrations.

Brand Motion Identity — define three constants:

1. Signature easing: One curve for 80% of animations
2. Duration palette: 3 durations (quick / standard / slow)
3. Entrance pattern: One consistent entry style

Deep dive: director/motion-personality.md

Property Selection

Simplicity threshold: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.

Deep dive: reference/property-selection.md

Duration Table

Distance scales duration: 100px = base. 200px = 1.3x. 400px = 1.6x.

Enter > Exit: Entrances 30-50% longer than exits. Users care about what appears.

Interactive feedback:

• Hover: <100ms
• Press: <150ms
• Release/settle: 200-300ms
• Error shake: 300-400ms (2-3 oscillations)

Deep dive: reference/timing-easing-tables.md

Easing Selection

Directional rules:

• Entrance → decelerate (fast start, gentle landing): ease-out family
• Exit → accelerate (gentle start, fast departure): ease-in family
• On-screen → smooth both ends: ease-in-out family
• Looping ambient → seamless: sine-based ease-in-out

Industry standards:

Material-based easing:

Deep dive: reference/timing-easing-tables.md

Common Patterns

Button Press (Playful)

1. Anticipation: Scale to 0.97 (50ms, ease-out)
2. Squash: Scale to [1.04, 0.96] (100ms, ease-in)
3. Follow through: Overshoots to 1.02, settles to 1.0 (spring, 200ms)
4. Secondary: Shadow shrinks during press, icon shifts down 2px
5. Total: ~150ms press + 200ms settle

Card Entrance (Premium)

1. Start: 20px below target, opacity 0
2. Path: Slight curve (10px X offset at midpoint)
3. Easing: ease-out-cubic deceleration
4. Follow through: Shadow arrives 50ms after card
5. Secondary: Content fades in 100ms after card lands
6. Staging: Other cards dim to 80%

Success State (Playful)

1. Primary: Scale pop with ease-out-back
2. Secondary: Checkmark draws in
3. Ambient: Subtle particle burst
4. Color: Green fill
5. Total: 300-400ms

Error Shake (Corporate)

1. Primary: Position oscillates 2-3 times, ±10-15px horizontal
2. Easing: ease-in-out for sharp stops
3. Color: Red tint
4. Total: 300-400ms
5. No overshoot: Errors feel firm

More patterns: patterns/entrance-exit.md | patterns/state-feedback.md

Choreography Essentials

Coordinated entry:

• Lead with the hero — primary element enters first or most prominently
• Spatial consistency — all elements enter from same direction
• Counter-motion — hero moves right → ambient moves left at 20-30% speed

1/3 Rule (distance): No motion travels more than 1/3 of screen without a keyframe change.

1/3 Rule (elements): With 3+ elements, no more than 1/3 in active motion simultaneously.

Stagger budgets:

Critical: Total stagger must stay under 500ms.

Deep dive: director/choreography.md