A living gallery of motion

Motion, one principle at a time.

Fifteen interactive demonstrations of the building blocks behind motion design. Tune each principle live, feel how the parameters shape the motion, and read the lessons when you want to go deeper.

Ease In

Timing

Starts slow, accelerates into its destination

Ease Out

Timing

Fast start, soft landing — the default UI curve

Spring

Physics

Physics-based motion driven by stiffness and damping

Anticipation

Timing

A small counter-motion that signals the main motion

Follow Through

Timing

Trailing elements that settle after the lead

Squash & Stretch

Physics

Deformation that implies mass and impact

Parallax

Composition

Layered depth from differential motion

Elastic

Physics

Springy overshoot with a visible bounce

Drag & Momentum

Interaction

Gesture-driven motion that preserves velocity on release

Hover States

Interaction

Quick, confident feedback on pointer-over

Gesture Response

Interaction

Tactile feedback on tap and press

Scroll-linked

Composition

Animation driven by scroll progress

Stagger

Timing

Sequential timing across a group of elements

Orchestration

Timing

Coordinated motion across a scene

Arc Motion

Composition

Curved paths, the signature of organic motion

Go deeper

Twelve lessons, three tiers.

Foundations teach the why and the vocabulary. Expression translates Disney's craft principles to interfaces. Engineering covers performance, layout animations, and accessibility. Each lesson is interactive, with live controls, real-world examples to study, and exercises you can try today.

Tier I

Foundations

The why and the vocabulary of motion. Cannot skip.

Why motion exists in UI

Purpose, hierarchy, and the discipline of not animating

Timing & duration

How long, how often, and the rhythm of choreography

Easing

The four curves and their personalities

Springs vs tweens

Time-based motion vs physics-based motion

Tier II

Expression

Disney's craft principles, translated for interfaces.

Anticipation

Preparing the eye for motion about to happen

Follow-through & overlapping action

Motion doesn't stop cleanly, and shouldn't

Squash, stretch & impact

Mass, weight, and physical presence in 2D

Arcs

Organic motion follows curves; mechanical motion goes straight

Tier III

Engineering

How to build motion that performs and respects users.

Performance

What to animate, what to avoid, and why

Layout animations & FLIP

The trick behind every smooth rearrangement

Interruptibility & interaction

The best animations let users change their mind mid-motion

Accessibility & restraint

Respecting the users your animation could hurt