Motion Design — The Grammar of Movement
Motion is not decoration. It communicates relationships (this came from there), state (this is loading), hierarchy (look here first), and personality (this feels playful vs. precise). Bad motion is worse than no motion — it creates cognitive noise. Good motion is invisible until you remove it.
Core Principles
1. Motion Has Meaning
Every animation must answer: what is this movement saying?
| Purpose |
Motion type |
Example |
| Spatial continuity |
Transform origin, shared element transitions |
Card expands into detail view from its original position |
| State change |
Fade, morph, color shift |
Button transitions from idle → loading → success |
| Attention direction |
Scale pulse, entrance animation, parallax |
New notification slides in from the edge |
| Relationship |
Staggered entrance, coordinated movement |
List items animate in sequence (parent → children) |
| Personality |
Easing curve choice, overshoot, bounce |
Playful UI uses spring physics; serious UI uses cubic bezier |
| Feedback |
Micro-interaction, haptic metaphor |
Button depresses on press, element resists then snaps |
If you can't articulate what a motion communicates, remove it.
2. Timing Is Everything
Duration guidelines:
| Context |
Duration |
Why |
| Micro-interaction (hover, press) |
100–200ms |
Must feel instant, below conscious attention threshold |
| State transition (toggle, tab switch) |
200–350ms |
Noticeable but not sluggish |
| Entrance/exit animation |
300–500ms |
Needs to be readable but not slow |
| Page/view transition |
400–700ms |
Complex spatial change needs time to parse |
| Decorative/ambient |
1000ms–∞ |
Background movement should be slow, hypnotic |
The critical window: 200–500ms is where most UI animation lives. Below 150ms, motion is subliminal. Above 700ms, motion feels sluggish. Ambient motion is the exception — it operates on a different perceptual channel.
3. Easing Is Character
The easing curve defines personality more than any other motion property.
Core curves:
- ease-out (decelerate) — the workhorse. Elements arrive with energy and settle. Feels natural for entrances.
cubic-bezier(0, 0, 0.2, 1)
- ease-in (accelerate) — for exits. Elements gather speed as they leave. Rarely used alone.
cubic-bezier(0.4, 0, 1, 1)
- ease-in-out (S-curve) — for position changes where start and end are both visible.
cubic-bezier(0.4, 0, 0.2, 1)
- linear — mechanical, robotic. Use for progress bars, loading indicators, continuous rotation. Never for UI transitions.
- spring — organic, alive. Overshoots and settles. Playful personality.
spring(mass, stiffness, damping)
Advanced curves:
- Anticipation — small reverse movement before the main action (pull back before launching)
- Follow-through — elements continue slightly past their target then settle back
- Overshoot — intentional overshooting for energetic, bouncy feel
Read references/easing-recipes.md for specific curve values mapped to personality types.
Choreography
Staggering
When multiple elements animate, stagger their timing to create visual rhythm:
- Cascade stagger — fixed delay between each element (40–80ms). Creates a waterfall effect. Good for lists.
- Distance stagger — delay proportional to distance from a focal point. Creates a ripple. Good for grids.
- Group stagger — groups of elements animate together, with delays between groups. Creates sections.
Rule: Total stagger duration should not exceed the individual animation duration. If each item takes 300ms and you have 10 items, stagger by 30ms (not 300ms) to keep the total under 600ms.
Orchestration
Complex transitions coordinate multiple movements:
- Exit first, enter second — remove old content before introducing new (prevents visual collision)
- Shared elements bridge — if an element exists in both states, it morphs continuously (doesn't exit/enter)
- Container first — animate the container, then its contents (establishes spatial context)
- Focal element leads — the most important element moves first, supporting elements follow
Scroll-Driven Motion
Read references/scroll-animation-patterns.md for scroll-linked animation techniques.
Key principle: Scroll-driven motion should feel like the user is revealing content, not triggering it. Elements should move in response to scroll position, not play canned animations when they enter the viewport.
Performance
The 60fps Contract
Motion must maintain 60fps. Dropped frames destroy the illusion of fluidity.
GPU-accelerated properties (safe to animate):
transform (translate, scale, rotate)opacityfilter (blur, brightness — with caution on mobile)
Layout-triggering properties (expensive, avoid animating):
width, height, top, left, margin, paddingfont-size, border-width
Compositing properties (use sparingly):
will-change — declare before animation starts, remove aftercontain — limit paint/layout scope
Reduced Motion
Always respect prefers-reduced-motion:
- Replace motion with instant state changes or simple fades
- Never remove information that was communicated through motion — find a static alternative
- Ambient/decorative motion should stop entirely
When to Consult This Skill
- Choosing animation for an artifact's entrance, transitions, or interactions
- Deciding between CSS transitions, CSS animations, WAAPI, or JS animation
- Setting timing and easing for any motion
- Choreographing multi-element sequences
- Optimizing animation performance
- Building scroll-driven experiences
1---2name: motion-design3description: Knowledge skill for animation principles, timing, easing, choreography, and motion language in digital artifacts. Covers micro-interactions, page transitions, loading states, scroll-driven animation, and performance-aware motion patterns. Consult when any artifact or design needs movement — from a single hover effect to a fully choreographed experience.4---56# Motion Design — The Grammar of Movement78Motion is not decoration. It communicates relationships (this came from there), state (this is loading), hierarchy (look here first), and personality (this feels playful vs. precise). Bad motion is worse than no motion — it creates cognitive noise. Good motion is invisible until you remove it.910## Core Principles1112### 1. Motion Has Meaning1314Every animation must answer: **what is this movement saying?**1516| Purpose | Motion type | Example |17|---------|------------|---------|18| **Spatial continuity** | Transform origin, shared element transitions | Card expands into detail view from its original position |19| **State change** | Fade, morph, color shift | Button transitions from idle → loading → success |20| **Attention direction** | Scale pulse, entrance animation, parallax | New notification slides in from the edge |21| **Relationship** | Staggered entrance, coordinated movement | List items animate in sequence (parent → children) |22| **Personality** | Easing curve choice, overshoot, bounce | Playful UI uses spring physics; serious UI uses cubic bezier |23| **Feedback** | Micro-interaction, haptic metaphor | Button depresses on press, element resists then snaps |2425If you can't articulate what a motion communicates, remove it.2627### 2. Timing Is Everything2829**Duration guidelines:**3031| Context | Duration | Why |32|---------|----------|-----|33| Micro-interaction (hover, press) | 100–200ms | Must feel instant, below conscious attention threshold |34| State transition (toggle, tab switch) | 200–350ms | Noticeable but not sluggish |35| Entrance/exit animation | 300–500ms | Needs to be readable but not slow |36| Page/view transition | 400–700ms | Complex spatial change needs time to parse |37| Decorative/ambient | 1000ms–∞ | Background movement should be slow, hypnotic |3839**The critical window:** 200–500ms is where most UI animation lives. Below 150ms, motion is subliminal. Above 700ms, motion feels sluggish. Ambient motion is the exception — it operates on a different perceptual channel.4041### 3. Easing Is Character4243The easing curve defines personality more than any other motion property.4445**Core curves:**4647- **ease-out** (decelerate) — the workhorse. Elements arrive with energy and settle. Feels natural for entrances. `cubic-bezier(0, 0, 0.2, 1)`48- **ease-in** (accelerate) — for exits. Elements gather speed as they leave. Rarely used alone. `cubic-bezier(0.4, 0, 1, 1)`49- **ease-in-out** (S-curve) — for position changes where start and end are both visible. `cubic-bezier(0.4, 0, 0.2, 1)`50- **linear** — mechanical, robotic. Use for progress bars, loading indicators, continuous rotation. Never for UI transitions.51- **spring** — organic, alive. Overshoots and settles. Playful personality. `spring(mass, stiffness, damping)`5253**Advanced curves:**5455- **Anticipation** — small reverse movement before the main action (pull back before launching)56- **Follow-through** — elements continue slightly past their target then settle back57- **Overshoot** — intentional overshooting for energetic, bouncy feel5859Read `references/easing-recipes.md` for specific curve values mapped to personality types.6061## Choreography6263### Staggering6465When multiple elements animate, stagger their timing to create visual rhythm:6667- **Cascade stagger** — fixed delay between each element (40–80ms). Creates a waterfall effect. Good for lists.68- **Distance stagger** — delay proportional to distance from a focal point. Creates a ripple. Good for grids.69- **Group stagger** — groups of elements animate together, with delays between groups. Creates sections.7071**Rule:** Total stagger duration should not exceed the individual animation duration. If each item takes 300ms and you have 10 items, stagger by 30ms (not 300ms) to keep the total under 600ms.7273### Orchestration7475Complex transitions coordinate multiple movements:76771. **Exit first, enter second** — remove old content before introducing new (prevents visual collision)782. **Shared elements bridge** — if an element exists in both states, it morphs continuously (doesn't exit/enter)793. **Container first** — animate the container, then its contents (establishes spatial context)804. **Focal element leads** — the most important element moves first, supporting elements follow8182### Scroll-Driven Motion8384Read `references/scroll-animation-patterns.md` for scroll-linked animation techniques.8586**Key principle:** Scroll-driven motion should feel like the user is *revealing* content, not *triggering* it. Elements should move in response to scroll position, not play canned animations when they enter the viewport.8788## Performance8990### The 60fps Contract9192Motion must maintain 60fps. Dropped frames destroy the illusion of fluidity.9394**GPU-accelerated properties (safe to animate):**95- `transform` (translate, scale, rotate)96- `opacity`97- `filter` (blur, brightness — with caution on mobile)9899**Layout-triggering properties (expensive, avoid animating):**100- `width`, `height`, `top`, `left`, `margin`, `padding`101- `font-size`, `border-width`102103**Compositing properties (use sparingly):**104- `will-change` — declare before animation starts, remove after105- `contain` — limit paint/layout scope106107### Reduced Motion108109Always respect `prefers-reduced-motion`:110- Replace motion with instant state changes or simple fades111- Never remove information that was communicated through motion — find a static alternative112- Ambient/decorative motion should stop entirely113114## When to Consult This Skill115116- Choosing animation for an artifact's entrance, transitions, or interactions117- Deciding between CSS transitions, CSS animations, WAAPI, or JS animation118- Setting timing and easing for any motion119- Choreographing multi-element sequences120- Optimizing animation performance121- Building scroll-driven experiences
npbuilds