DOMAIN:CREATIVE:MOTION_DESIGN_PRINCIPLES¶

OWNER: ilian (Motion Designer) UPDATED: 2026-03-28 SCOPE: Core motion design theory, animation principles applied to UI and brand, motion as communication tool ALSO_USED_BY: alexander (Creative Director — brand motion direction), felice (Visual Asset Producer — animation implementation), floris (Team Alfa frontend — CSS/Framer Motion), floor (Team Bravo frontend — CSS/Framer Motion), martijn (Team Alfa iOS — SwiftUI animation), valentin (Team Bravo iOS — SwiftUI animation) ALSO_CHECK: domains/creative/ui-animation.md (motion tokens, micro-interactions), domains/creative/motion-accessibility.md (reduced motion, WCAG), domains/visual-production/remotion-patterns.md (Remotion implementation)

THE_12_PRINCIPLES_OF_ANIMATION¶

SOURCE: Frank Thomas and Ollie Johnston, "The Illusion of Life" (1981, Disney) CONTEXT: Originally for character animation. Every principle has a direct UI/brand motion counterpart.

1. SQUASH_AND_STRETCH¶

DEFINITION: Objects deform on impact or acceleration to convey weight and elasticity. UI_APPLICATION: Buttons that compress slightly on press (scale Y 0.95). Modals that overshoot on open then settle. Pull-to-refresh indicators that stretch. RULE: Preserve volume — if an element squashes vertically, it should stretch horizontally by the same proportion. BRAND_USE: Playful brands exaggerate squash and stretch. Enterprise brands use minimal or none.

2. ANTICIPATION¶

DEFINITION: A preparatory movement before the main action — tells the viewer what is about to happen. UI_APPLICATION: A button scales down slightly before transitioning to the next screen. A card lifts (shadow deepens) before being dragged. A drawer nudges open before sliding fully. RULE: Anticipation builds expectation. Use it for significant actions, not every click. TIMING: Anticipation phase is typically 30-50% of total animation duration.

3. STAGING¶

DEFINITION: Present an idea so it is unmistakably clear. Control what the audience sees. UI_APPLICATION: Dim background (overlay) when a modal opens. Use motion to direct attention to the primary CTA. Stagger list items so the first item (most important) appears first. RULE: Only one thing should demand attention at a time. If everything moves, nothing stands out.

4. STRAIGHT_AHEAD_VS_POSE_TO_POSE¶

DEFINITION: Two approaches — animate frame by frame (straight ahead) or define key poses and fill between (pose to pose). UI_APPLICATION: CSS/SwiftUI animations are pose-to-pose — you define start and end states, the system interpolates. Procedural/physics animations (spring, particle) are closer to straight-ahead. PRACTICAL: Use keyframe animation (pose-to-pose) for predictable UI transitions. Use spring physics for interactive, gesture-driven motion.

5. FOLLOW_THROUGH_AND_OVERLAPPING_ACTION¶

DEFINITION: When a character stops, different parts stop at different times. Hair keeps moving after the head stops. UI_APPLICATION: When a panel slides in, its content (text, images) arrives slightly after the panel. A card flips, and the content on the back face fades in after the flip completes. Staggered list entrance — container appears, then items fill in. RULE: Creates a natural, layered feel. Without it, motion feels robotic. TIMING: Overlap elements by 50-100ms (not more, or it feels sluggish).

6. SLOW_IN_AND_SLOW_OUT¶

DEFINITION: Objects accelerate from rest and decelerate to rest. Nothing in nature starts or stops instantly. UI_APPLICATION: This is the foundation of easing curves. Use ease-out for elements entering the screen (arriving, decelerating). Use ease-in for elements leaving (departing, accelerating away). Use ease-in-out for elements that move within the viewport. CRITICAL: Never use linear easing for UI transitions — it looks mechanical and unnatural. EXCEPTION: Linear easing is appropriate for looping progress indicators and color transitions.

7. ARC¶

DEFINITION: Natural movement follows curved paths, not straight lines. UI_APPLICATION: A notification that enters from the top-right follows a slight arc, not a rigid diagonal. FAB (floating action button) expand animations use radial motion. Page transitions on iOS follow arcs (push/pop navigation). RULE: The more organic the brand, the more arcs in motion. The more technical/precise the brand, the more linear the paths.

8. SECONDARY_ACTION¶

DEFINITION: Additional motion that supports the primary action without distracting from it. UI_APPLICATION: A success checkmark appears (primary), then a subtle confetti burst (secondary). A modal opens (primary), background blurs simultaneously (secondary). A button submits (primary), a spinner appears inside the button (secondary). RULE: Secondary action must not compete with primary. It should be noticeable only if you look for it.

9. TIMING¶

DEFINITION: The number of frames (or milliseconds) an action takes. Defines the weight and mood of motion. UI_APPLICATION: See DURATION_SCALE section below. Fast = snappy, responsive, lightweight. Slow = heavy, deliberate, dramatic. Micro-interactions: 100-200ms. Page transitions: 250-400ms. Brand moments: 400-800ms. RULE: If the user triggered the action, motion should be fast (100-300ms). If the system initiated it, slightly longer is acceptable (200-500ms).

10. EXAGGERATION¶

DEFINITION: Push motion beyond reality to make it clearer and more engaging. UI_APPLICATION: A toggle switch that overshoots its end position by 2px then springs back. An error shake that moves further than realistic. A success animation with a slightly oversized checkmark. BRAND_USE: Consumer/playful brands use more exaggeration. B2B/enterprise brands use subtle or none. RULE: Exaggeration is the difference between motion that communicates emotion and motion that merely moves.

11. SOLID_DRAWING¶

DEFINITION: Understanding form, weight, volume, and light. Objects should feel three-dimensional. UI_APPLICATION: Shadows that respond to depth (elevation). Cards that tilt with parallax on hover. 3D transforms that respect perspective. Elements that feel like they have physical weight (heavier elements move slower). RULE: Consistent depth model. If cards cast shadows, the shadow must match the light source direction everywhere.

12. APPEAL¶

DEFINITION: The overall charm and attractiveness of the animation. Not just beautiful — clear, readable, pleasing. UI_APPLICATION: Motion should feel intentional, not accidental. Consistent timing across the interface. Cohesive easing curves (not a mix of 5 different curves). Motion that matches the brand voice — a banking app feels different from a gaming app. RULE: If a user notices the animation instead of the content, the animation has failed.

EASING_CURVES¶

CORE_CURVES¶

Curve	cubic-bezier	When to Use	Feel
Linear	`0, 0, 1, 1`	Progress bars, color shifts, looping spinners	Mechanical, constant
Ease-out (decelerate)	`0, 0, 0.2, 1`	Elements ENTERING viewport	Arriving, landing, settling
Ease-in (accelerate)	`0.4, 0, 1, 1`	Elements LEAVING viewport	Departing, launching away
Ease-in-out (standard)	`0.4, 0, 0.2, 1`	Elements moving WITHIN viewport	Smooth, natural repositioning
Emphasized ease-in-out	`0.4, 0, 0, 1`	Large/dramatic transitions	Cinematic, deliberate
Spring	N/A (physics)	Interactive/gesture-driven, toggles, playful brands	Bouncy, alive, organic

CUBIC_BEZIER_ANATOMY¶

cubic-bezier(x1, y1, x2, y2)
                |       |
                P1      P2

P1 (x1, y1) = controls the START of the curve (acceleration)
P2 (x2, y2) = controls the END of the curve (deceleration)

x1 = 0 → fast start (no ease-in)
y2 = 1 → full deceleration (natural ease-out)
y1 > 1 or y2 > 1 → overshoot (spring-like)

RULE: Use the platform's standard curves (Material Design, Apple HIG) as defaults. Custom curves only when the brand requires it. ANTI_PATTERN: Using ease (the CSS default: 0.25, 0.1, 0.25, 1) everywhere. It is a compromise curve that is optimal for nothing.

SPRING_PHYSICS¶

PARAMETERS: - stiffness — How quickly the spring moves to target. Higher = snappier. Typical: 100-400. - damping — How quickly oscillation settles. Higher = less bounce. Typical: 10-40. - mass — Weight of the animated object. Higher = slower, heavier. Typical: 0.5-2.

// Framer Motion spring presets
gentle:  { stiffness: 120, damping: 14 }   // Soft landing, minimal bounce
snappy:  { stiffness: 400, damping: 30 }   // Quick, responsive
bouncy:  { stiffness: 300, damping: 10 }   // Playful overshoot
stiff:   { stiffness: 500, damping: 40 }   // Almost no bounce, very fast

WHEN_TO_USE_SPRING: Interactive elements (drag, swipe, toggle), playful UI, elements that should feel physical. WHEN_NOT_TO_USE: Page transitions (too unpredictable), progress indicators, anything that needs precise duration.

DURATION_SCALE¶

GUIDELINES¶

Category	Duration	Examples
Instant	0-100ms	Button state (hover, active), ripple start, toggle snap
Fast micro	100-200ms	Tooltip appear, checkbox, icon morph, fade in/out
Standard micro	200-300ms	Dropdown open, accordion expand, tab switch, slide panel
Transition	300-500ms	Page transition, modal open/close, shared element morph
Complex	500-800ms	Multi-step reveal, staggered list (total), brand moment
Cinematic	800ms-2s	Splash/loading, brand reveal, onboarding animation

RULE: User-triggered actions should use the LOWER end of each range. System-initiated motion can use the upper end. RULE: On mobile, durations can be 10-20% shorter — smaller viewport means less distance to travel. RULE: No UI animation should exceed 500ms for functional transitions. Users perceive delays >400ms as sluggish.

DISTANCE_AFFECTS_DURATION¶

PRINCIPLE: Elements that travel further need more time. A modal sliding from the bottom of the screen needs more time than a tooltip fading in place. FORMULA (Material Design): duration = 200ms + (distance_in_dp * 0.5ms) CAP: Never exceed 500ms for functional transitions regardless of distance.

MOTION_AS_BRAND_EXPRESSION¶

BRAND_MOTION_SPECTRUM¶

PLAYFUL ←——————————————————————→ SERIOUS
  bouncy springs                    linear/ease-in-out
  exaggerated                       subtle
  overshoot                         no overshoot
  colorful transitions              opacity fades
  longer durations                  shorter durations
  curved paths (arcs)               straight paths
  squash & stretch                  rigid transforms

DEFINING_BRAND_MOTION¶

PROCESS: 1. Define 3-5 motion adjectives from brand attributes (e.g., "precise," "warm," "confident") 2. Map adjectives to curve style, duration range, and motion vocabulary 3. Create a motion reel (10-15 seconds) showing brand motion in context 4. Document as motion tokens in the design system

EXAMPLE — Enterprise SaaS: - Adjectives: precise, efficient, trustworthy - Curves: ease-in-out (standard), no spring/bounce - Duration: 150-300ms (fast, no waiting) - Vocabulary: fade, slide, scale (no rotate, no bounce, no overshoot)

EXAMPLE — Consumer App (playful): - Adjectives: fun, energetic, surprising - Curves: spring (bouncy), overshoot ease-out - Duration: 200-500ms (room for expression) - Vocabulary: bounce, spring, morph, expand, confetti

MOTION_HIERARCHY¶

DEFINITION: What moves first draws the eye. Motion hierarchy controls visual attention.

STAGGER_PATTERNS¶

1. HERO first (0ms)      — The primary element the user should see
2. SUPPORTING (50-100ms) — Secondary elements that provide context
3. DETAILS (100-200ms)   — Tertiary elements (metadata, actions)
4. AMBIENT (200-400ms)   — Background, decorative elements

RULE: Maximum 4 stagger levels. More than 4 creates a "waterfall" effect that slows the interface. RULE: Total stagger sequence should not exceed 600ms. After 600ms, users start interacting before animation completes.

ATTENTION_DIRECTION¶

MOTION draws attention. STILLNESS creates a canvas for motion to stand out. IF everything moves, nothing is important. IF only one thing moves, it is critically important.

PATTERN: Functional motion (button press, page transition) should be fast and subtle. Brand moments (first launch, achievement, milestone) can be slower and more expressive.

THE_MOTION_DESIGN_PROCESS¶

WORKFLOW¶

BRIEF → AUDIT → STORYBOARD → ANIMATIC → PROTOTYPE → PRODUCTION → QA

STAGE: BRIEF - INPUT: brand guidelines, design system, feature requirements - OUTPUT: motion brief (what moves, why, what emotion, target platforms)

STAGE: AUDIT - INPUT: existing product, competitor analysis - OUTPUT: motion audit (what works, what is inconsistent, opportunities) - CHECK: Do existing animations respect reduced motion? Are timings consistent?

STAGE: STORYBOARD - INPUT: UI designs (Figma), motion brief - OUTPUT: annotated frames showing before/after states, easing, duration, triggers - TOOL: Figma annotations, or dedicated storyboard frames

STAGE: ANIMATIC - INPUT: storyboard - OUTPUT: rough timing video showing the animation flow (can be Figma prototype or After Effects rough) - PURPOSE: Validate timing and feel BEFORE production - RULE: Get sign-off on the animatic before writing code

STAGE: PROTOTYPE - INPUT: approved animatic - OUTPUT: interactive prototype (Framer, Protopie, or code prototype) - PURPOSE: Test on device, validate with real interaction (touch, scroll, gesture)

STAGE: PRODUCTION - INPUT: approved prototype - OUTPUT: production-ready code (CSS, Framer Motion, SwiftUI, Lottie) - HANDOFF: Motion spec document with exact values (duration, easing, properties, triggers)

STAGE: QA - INPUT: production build - CHECK: 60fps on target devices, reduced motion respected, timings match spec - CHECK: No animation plays on page load without user trigger (WCAG) - CHECK: Total animation budget per page under 16ms per frame

LESS_IS_MORE¶

PRINCIPLE: Every animation must have a PURPOSE. If you cannot articulate why something moves, it should not move.

VALID_PURPOSES_FOR_MOTION¶

Purpose	Example
Feedback	Button press state, form submission confirmation
Orientation	Page transition showing spatial relationship
Focus	Stagger revealing the most important element first
Continuity	Shared element transition maintaining context
Delight	First-time experience, achievement celebration
Explanation	Animated diagram showing a process

INVALID_PURPOSES¶

Anti-Purpose	Why It Fails
"It looks cool"	Subjective, adds cognitive load
"The design felt static"	Add motion only where it solves a real problem
"Everyone does parallax"	Trend-following, often causes motion sickness
"Fill the loading time"	Use skeleton screens instead of decorative animation
"Show off our tech"	User does not care about your framework

MOTION_BUDGET¶

RULE: A page should have at most 2-3 simultaneous animations at any moment. RULE: If removing an animation does not hurt usability or brand expression, remove it. RULE: Every animation adds to page weight (JS bundle), rendering cost, and cognitive load. Justify the cost.

ANTI_PATTERNS¶

Anti-Pattern	Problem	Fix
Animating everything on page load	Overwhelming, slow perceived performance	Only animate above-fold hero + primary CTA
Inconsistent easing curves	Feels broken, unprofessional	Define 3-4 curves in motion tokens, use nothing else
Duration too long (>500ms for functional)	Interface feels sluggish	Stick to duration scale
Duration too short (<50ms)	Invisible, wasted code	Either make it perceptible (100ms+) or remove
Bouncing everything	Childish, distracting	Reserve bounce for one or two brand moments
Animating layout properties (top, left, width, height)	Triggers reflow, kills performance	Use transform and opacity only
No reduced motion alternative	Accessibility violation, legal risk (EAA)	Always implement prefers-reduced-motion
Motion blocking interaction	User cannot click until animation finishes	Never disable interaction during animation
Parallax on scroll	Motion sickness trigger, often poor mobile perf	Avoid unless brand demands it, always respect reduced motion

SELF_CHECK¶

BEFORE_EVERY_MOTION_DECISION: - [ ] Can I articulate WHY this element moves? - [ ] Does the motion match our brand motion adjectives? - [ ] Is the duration within the duration scale for this category? - [ ] Am I using the correct easing curve for this direction (enter/exit/within)? - [ ] Does this respect motion hierarchy (hero first, details last)? - [ ] Is there a prefers-reduced-motion alternative? - [ ] Will this run at 60fps on the lowest-spec target device? - [ ] Does removing this animation hurt the experience? (If no, remove it.)

REFERENCES¶

Thomas, Frank & Johnston, Ollie — "The Illusion of Life: Disney Animation" (1981)
Material Design Motion Guidelines — material.io/design/motion
Apple Human Interface Guidelines — Motion — developer.apple.com/design/human-interface-guidelines/motion
"Creating Usability with Motion" — Issara Willenskomer (UX in Motion Manifesto)
"Animation at Work" — Rachel Nabors (A Book Apart, 2017)
"Designing Interface Animation" — Val Head (Rosenfeld Media, 2016)
Google Web Fundamentals — Animations and Performance — web.dev/animations-guide