Skip to main content

Home All hubs and collections Form Shape, anatomy, and visual rhythm Typography Hierarchy, legibility, and type as meaning Color Perception, contrast, and hue psychology Layout Grid, space, and compositional structure Content Voice, clarity, and writing that earns attention Accessibility WCAG, inclusivity, and design for everyone Interaction Mental models, feedback, and feel Motion Duration, easing, and purposeful animation

Home / Motion / Checklist

Motion

Before you ship

A practical checklist for animation and motion. Work through it before handing off or publishing.

0

of 18 checked

Purpose

Every animation has a clear reason: it communicates state, aids navigation, or provides feedback
No animation exists purely for decoration — or if it does, it is disabled for reduced motion
Motion reinforces spatial relationships (things slide in from where they came from)

Duration and Easing

UI transitions are between 150ms and 400ms — nothing drags or disappears
Larger or more complex movements take longer than small, simple ones
Ease-out is used for elements entering; ease-in is used for elements leaving
Linear easing has been replaced with a natural curve everywhere except loading spinners

Choreography

Stagger delays are used for list or group animations — no more than 50ms per item
Entrance and exit animations are paired — what slides in from the right slides out to the right
No more than three elements animate simultaneously on a single screen

Accessibility

All animations respect prefers-reduced-motion — they are removed or replaced with a fade
No content flashes more than three times per second
State changes that are communicated through motion also have a non-motion fallback
The prefers-reduced-motion query has been tested in the browser

Performance

All animations use only transform and opacity — no layout-triggering properties
will-change is applied sparingly and only where needed
Animations have been tested on a mid-range mobile device for dropped frames
No animation blocks user interaction with the page

design hubs Design is not decoration.

Home Form Typography Color Layout Content Accessibility Interaction Motion All Articles Progress Search Principles Conflict Matrix Guide About Contact Privacy

© 2026 Paul Divers. All rights reserved.

Keyboard shortcuts

Show shortcuts: ?
Search: CtrlK
Previous article: ←
Next article: →
Close: Esc