Motion design / 3 min read
Motion with purpose: animate the change, respect the reader.
Use animation to explain what happened, give people control, and design a thoughtful reduced-motion experience.
Give every movement a reason
Imagine a portfolio where every heading slides into place, every image zooms, and the background drifts as you scroll. The work may be impressive, but each effect competes with the project story. Before adding motion, finish this sentence: “This movement helps someone understand…” A brief transition might connect a thumbnail with its expanded view or clarify that an item has changed position. If you cannot name the information it adds, try the composition without it. Use motion selectively so the important changes remain easy to notice.
Plan the still version first
Design the beginning and end states before choosing an easing curve or duration. A menu should have a clear open state, a saved item should show that it is saved, and a completed task should have a readable confirmation. These states need to make sense even when the transition between them is removed. For a project gallery, compare an animated expansion with an immediate change to the same content. Make sure the title, selected item, and close action remain understandable in both versions. This gives the team a dependable foundation for adding expression.
Respond to the reduced-motion preference
MDN explains that prefers-reduced-motion detects a device setting requesting less non-essential motion. The preference does not change your design by itself: the site must provide the alternative. Under the reduce setting, you might remove a large zoom, replace a sliding panel with an immediate reveal, or reduce decorative movement. Keep the information and controls available in every version. Also remember that no-preference means no preference has been communicated through that setting; it is not evidence that everyone wants dramatic animation. Test the actual reduced-motion experience rather than assuming a media query covers every effect.
MDN: prefers-reduced-motion ↗Let people disable interaction animation
WCAG 2.3.3, at Level AAA, addresses motion animation triggered by interaction: it must be possible to disable it unless it is essential to the function or information. Extra movement attached to scrolling, such as parallax, deserves particular attention. The ordinary movement needed to scroll content is different from decorative layers moving at separate speeds. For a portfolio, remove the extra drift in the reduced-motion version while leaving the project content accessible. A meaningful alternative preserves the reader’s task; simply hiding the animated section could remove the very information they came to see.
W3C: Animation from Interactions, AAA ↗Give automatic content appropriate controls
Automatically moving content has its own guidance. WCAG 2.2.2, at Level A, requires a way to pause, stop, or hide moving, blinking, or scrolling information when it starts automatically, lasts more than five seconds, and appears alongside other content, unless the activity is essential. Automatically updating information has a related requirement, including an option to control update frequency, without that five-second condition. An endlessly moving testimonial strip therefore needs more thought than a short transition after a deliberate click. Any pause control should let the reader continue using the rest of the page; stopping only while it holds focus is insufficient.
W3C: Pause, Stop, Hide, A ↗Review the complete experience
Make a short inventory of movement: page entrances, hover effects, scrolling effects, galleries, and automatically changing panels. For each one, record its purpose, trigger, end state, and reduced-motion alternative. Then take a real task through the site in the normal and reduced-motion versions. Check that the content is still present, controls remain usable, and essential changes are communicated clearly. Ask someone unfamiliar with the design to describe what changed after an action. Their answer helps you judge whether the movement explains the interface or merely adds another event to watch.