Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Motion design in interfaces is the use of animation to make change legible: where a thing came from, what belongs to what, whether an action registered. Motion that does not answer one of those questions is decoration, and decoration has a cost in attention, in code, and in bytes.
Treating motion as a system rather than per-component styling is what keeps it coherent. A small vocabulary — a handful of named entrance styles, an on/off choice for stagger, bounded distance and duration — behaves like a Design Token set: authors pick from it, and the result is consistent because the options are.
Several constraints shape any real implementation.
Reduced motion is not optional. See Reduced Motion.
Entrances break no-script rendering. An animation starting at zero opacity means the content is invisible until scripts run, so any surface required to work without JavaScript can only animate on interaction. See Progressive Enhancement.
Animation libraries cost bytes, and the cost is per route. Splitting the feature set so only the used capabilities load is the difference between a few kilobytes and tens of them; see Performance Budget.
Some effects cannot take a transform. A toolbar positioned from a measured rectangle is corrupted by a transform, so it has to fade rather than lift — a physical constraint, not a preference.
See also11
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface9 connections
Uncanny Valley
The proposed dip in affinity as a likeness approaches, without reaching, the human.
Design & Interface10 connections
Easing
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
Design & Interface16 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface22 connections
Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
Design & Interface21 connections
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface44 connections
Keyframe Animation
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
Graphics & Rendering6 connections
Carousel
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
Design & Interface10 connections
Web Animations API
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.
Web Platform10 connections
requestAnimationFrame
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
Web Platform12 connections
Linked from19
- Bézier CurveGraphics & Rendering
The smooth curve defined by a handful of control points that underlies fonts, vector drawings, animation easing, and the pen tool in every design app.
- CarouselDesign & Interface
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Dark ModeDesign & Interface
Serving an alternate palette for low-light preference, and the three states that implies.
- Diegetic InterfacePlay & Games
An interface that exists inside the fiction, readable by the character as well as the player.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Game FeelPlay & Games
The perceptual layer between input and simulation, and the tuning that makes a control scheme read as responsive.
- Keyframe AnimationGraphics & Rendering
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
- OKLCHDesign & Interface
A perceptually uniform color space that makes lightness and chroma behave predictably.
- Progressive EnhancementWeb Platform
Building so the core experience works without scripts, with richer behavior layered on top.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- requestAnimationFrameWeb Platform
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
- SkeuomorphismDesign & Interface
Designing a digital object to visually mimic its physical predecessor, borrowing familiarity at the cost of extra visual weight.
- Stacking ContextDesign & Interface
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- Uncanny ValleyDesign & Interface
The proposed dip in affinity as a likeness approaches, without reaching, the human.
- Variable FontsDesign & Interface
A single font file that encodes a continuous design space, letting weight, width, and other axes be set to any value at runtime.
- View TransitionsWeb Platform
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
- Web Animations APIWeb Platform
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.