Motion Design

by lottiefilesf9a8a041b851MIT1.9K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 months ago

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

Instructions onlyDesign & Creative

AI-generated overview

Guides UI motion design with timing, easing, choreography and Disney animation principles for animations and transitions.

What it does: This skill supplies motion design guidance for UI animations and transitions, covering emotional intent, motion personality archetypes, property selection, duration and easing tables, choreography rules and Disney animation principles adapted for interfaces. It includes common recipes such as button press, card entrance, success and error states, plus quality rules and troubleshooting references. It produces design direction and specifications rather than code or rendered assets.
When to use it: Use it when creating UI animations, transitions, micro-interactions, loading or feedback states, page transitions, scroll-triggered effects, or when establishing a brand motion identity. It also fits choreographing multi-element sequences and reviewing whether existing motion feels right.
Requirements: No scripts or runtime dependencies; it is an instructions-only skill. It works alongside any animation system such as CSS, Framer Motion, GSAP, Lottie or Spring, but requires none of them.

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 [blocked]

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 [blocked]

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 [blocked]

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 [blocked]

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:

Deep dive: reference/timing-easing-tables.md [blocked]

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 [blocked] | patterns/state-feedback.md [blocked]

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 [blocked]

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 [blocked]

Weight Classification

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 [blocked]

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 [blocked]

File Reference

Philosophy (director/):

core-philosophy.md [blocked] — Three Pillars deep dive
decision-framework.md [blocked] — Full decision pipeline
disney-principles.md [blocked] — 12 principles, UI-adapted
motion-personality.md [blocked] — 4 archetypes + brand identity
emotion-mapping.md [blocked] — Emotion → motion + color psychology
choreography.md [blocked] — Multi-element coordination
narrative-structure.md [blocked] — Micro-story framework
context-adaptation.md [blocked] — Platform, a11y, performance

Reference (reference/):

timing-easing-tables.md [blocked] — Duration + easing lookups
property-selection.md [blocked] — Property communication guide
troubleshooting.md [blocked] — Animation smells + fixes
quality-checklist.md [blocked] — Evaluation criteria

Patterns (patterns/):

entrance-exit.md [blocked] — Entrance/exit recipes
state-feedback.md [blocked] — Success, error, loading, hover
ambient-continuous.md [blocked] — Looping, breathing, parallax
multi-element.md [blocked] — Stagger + choreography recipes

Source and attribution

Source:lottiefiles/motion-design-skillinskills/motion-designat commitf9a8a04

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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%

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

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