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:

• Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness

• Does it express brand personality? → Motion Personality archetypes

• Does it tell a story or guide attention? → Disney principles + choreography

• Is this a complex multi-element scene? → 1/3 Rule + stagger patterns

Quick Reference: 8-Step Checklist

Before creating any animation:

• Emotional target? — joy, calm, urgency, elegance

• Motion Personality? — Playful, Premium, Corporate, Energetic

• Primary property? — position, scale, rotation, opacity

• Duration? — see duration table below

• Easing family? — entrance=decelerate, exit=accelerate

• Hero element? — apply staging principles

• Secondary + ambient layers? — add richness

• 1/3 rules? — motion distance, simultaneous elements

Three Pillars (CRITICAL)

Every animation must satisfy three pillars before any technical decisions:

Pillar

Question

Drives

Emotional Intent

What should the viewer FEEL?

Easing, timing, amplitude

Visual Narrative

What's the micro-story?

Setup → Action → Resolution

Motion Craft

How do we make it believable?

Physics, secondary motion, paths

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.

Archetype

Duration

Easing

Overshoot

Keywords

Playful

150-300ms

ease-out-back

10-20%

fun, whimsical, bouncy, cute

Premium

350-600ms

cubic-bezier(0.4,0,0.2,1)

0%

elegant, minimal, luxury, sophisticated

Corporate

200-400ms

cubic-bezier(0.2,0,0,1)

0-3%

clean, professional, business, dashboard

Energetic

100-250ms

ease-out-expo

15-30%

dynamic, energetic, bold, exciting

Default: Corporate for UI, Playful for illustrations.

Brand Motion Identity — define three constants:

• Signature easing: One curve for 80% of animations

• Duration palette: 3 durations (quick / standard / slow)

• Entrance pattern: One consistent entry style

Deep dive: director/motion-personality.md

Property Selection

Effect Goal

Primary Property

Secondary Properties

Entrance/Exit

position

opacity, scale

Emphasis/Attention

scale

rotation (subtle), opacity pulse

State Change

opacity, color

scale (press feedback)

Direction/Flow

position

rotation (follow path)

Depth/3D Feel

scale + shadow

position (parallax)

Loading/Progress

rotation (spinner)

scale, opacity pulse

Success

scale (pop)

color, rotation (checkmark draw)

Error/Alert

position (shake)

color, rotation (wobble)

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

Deep dive: reference/property-selection.md

Duration Table

Element Type

Duration

Rationale

Tooltip / micro-feedback

80-120ms

Must feel instant

Button press / toggle

120-180ms

Responsive feedback

Icon transition

150-250ms

Clear state change

Card enter / exit

200-350ms

Spatial awareness

Modal / dialog

300-400ms

Focus shift

Page transition

400-600ms

Context switch

Dramatic reveal

600-1200ms

Theatrical build

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:

Standard

Cubic Bezier

Use For

Material Design 3

(0.2, 0, 0, 1)

Default on-screen

MD3 Emphasized

(0.05, 0.7, 0.1, 1)

Entrances, attention

MD3 Accelerate

(0.3, 0, 1, 1)

Exits, dismissals

Apple HIG

(0.25, 0.1, 0.25, 1)

Standard iOS

Snappy UI

(0.2, 0, 0, 1)

Fast, decisive

Gentle float

(0.4, 0, 0.2, 1)

Ambient, background

Bounce settle

(0.175, 0.885, 0.32, 1.275)

Overshoot, playful

Material-based easing:

Material

Duration Scale

Overshoot

Rigid (metal, stone)

1.2x

0%

Elastic (rubber, gel)

0.8x

15-25%

Fluid (water, paint)

1.5x

5%

Paper (cards, sheets)

1.0x

3-5%

Gas (smoke, fog)

2.0x

0%

Glass (brittle)

0.9x

0%

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

Common Patterns

Button Press (Playful)

• Anticipation: Scale to 0.97 (50ms, ease-out)

• Squash: Scale to [1.04, 0.96] (100ms, ease-in)

• Follow through: Overshoots to 1.02, settles to 1.0 (spring, 200ms)

• Secondary: Shadow shrinks during press, icon shifts down 2px

• Total: ~150ms press + 200ms settle

Card Entrance (Premium)

• Start: 20px below target, opacity 0

• Path: Slight curve (10px X offset at midpoint)

• Easing: ease-out-cubic deceleration

• Follow through: Shadow arrives 50ms after card

• Secondary: Content fades in 100ms after card lands

• Staging: Other cards dim to 80%

Success State (Playful)

• Primary: Scale pop with ease-out-back

• Secondary: Checkmark draws in

• Ambient: Subtle particle burst

• Color: Green fill

• Total: 300-400ms

Error Shake (Corporate)

• Primary: Position oscillates 2-3 times, ±10-15px horizontal

• Easing: ease-in-out for sharp stops

• Color: Red tint

• Total: 300-400ms

• 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:

Pattern

Delay

Total Budget

Use Case

Micro cascade

20-40ms

<200ms

List items, grid cells

Standard

50-100ms

<400ms

Cards, panels, nav

Dramatic

100-200ms

<600ms

Hero sections

Wave

30-60ms

<500ms

Data visualizations

Critical: Total stagger must stay under 500ms.

Deep dive: director/choreography.md

Emotion-to-Motion Map

Emotion

Character

Path

Easing

Duration

Joy

Bouncy, arcs

Curved, upward

ease-out-back

200-400ms

Calm

Smooth, flowing

Gentle curves

sine ease-in-out

500-1000ms

Urgency

Sharp, fast

Straight lines

ease-out

100-200ms

Sadness

Slow, downward

Drooping curves

cubic ease-in-out

600-1200ms

Surprise

Sudden, expanding

Radial outward

ease-out-expo

150-300ms

Elegance

Slow, controlled

Long arcs

(0.4,0,0.2,1)

400-700ms

Playfulness

Bouncy, irregular

Arcs, squiggly

ease-out-back

200-350ms

Path as language: Angular = tense. Curved = friendly. Spiral = whimsical. Diagonal = purposeful. Vertical = growth/weight. Horizontal = progress.

Deep dive: director/emotion-mapping.md

Weight Classification

Weight

Examples

Duration

Overshoot

Easing

Heavy

Modals, overlays

300-500ms

0%

Gentle, high damping

Medium

Cards, panels

200-350ms

3-5%

Moderate

Light

Tooltips, badges, icons

80-200ms

5-15%

Responsive

Quality Rules

CRITICAL — never break

• Never linear for spatial movement — always use easing curves (linear only for spinners, progress bars)

• Never opacity-only for important state changes — combine with position or scale

• Never exceed 1/3 screen without intermediate keyframe

• Always three motion layers — primary + secondary + ambient

HIGH — strongly follow

• Match duration to element type (see tables)

• Use directional easing (ease-out entrance, ease-in exit)

• Apply Disney principles (especially anticipation, follow-through)

• Maintain consistent personality across scene

Full checklist: reference/quality-checklist.md

Troubleshooting Quick Reference

Problem

Likely Cause

Fix

Looks robotic

Linear easing or no arcs

Add easing curves + arc paths

Feels too slow

Duration too long for element type

Check duration table, use ease-out

Feels cheap/flat

Missing secondary + ambient

Add shadow motion + background life

Too distracting

Too many elements moving

Apply 1/3 rule, reduce amplitude

No personality

Generic easing everywhere

Apply personality archetype consistently

Deep dive: reference/troubleshooting.md

File Reference

Philosophy (director/):

• core-philosophy.md — Three Pillars deep dive

• decision-framework.md — Full decision pipeline

• disney-principles.md — 12 principles, UI-adapted

• motion-personality.md — 4 archetypes + brand identity

• emotion-mapping.md — Emotion → motion + color psychology

• choreography.md — Multi-element coordination

• narrative-structure.md — Micro-story framework

• context-adaptation.md — Platform, a11y, performance

Reference (reference/):

• timing-easing-tables.md — Duration + easing lookups

• property-selection.md — Property communication guide

• troubleshooting.md — Animation smells + fixes

• quality-checklist.md — Evaluation criteria

Patterns (patterns/):

• entrance-exit.md — Entrance/exit recipes

• state-feedback.md — Success, error, loading, hover

• ambient-continuous.md — Looping, breathing, parallax

• multi-element.md — Stagger + choreography recipes