A little movement can make an interface easier to follow. A panel opening in place can explain where its content came from. A clear button response can confirm that an interaction registered.
Movement can also demand attention without providing useful information. The design job is to know which job each effect is doing.
I like websites with personality. A restrained animation can feel polished and playful. But the page should remain considerate of the person trying to use it, including someone who has asked their device for less motion.
Think of motion as stage lighting. It can guide the audience toward the important action. If every light is following a different performer, we’ve mostly established that the lighting desk is available.
Start by naming the information the effect communicates
Before choosing an animation, describe the change in plain language. Is an item being added? Is a section opening? Is the system waiting for work to complete?
That description gives the effect a purpose and helps identify a quieter alternative.
Make state changes understandable
A fictional booking interface might expand a selected appointment to show its details. A brief transition can connect the collapsed and expanded states.
The final state still needs a clear label, usable controls and an appropriate accessible state. The animation cannot be the only explanation.
Likewise, a button can acknowledge a press while the operation continues. Its temporary appearance should not imply success before the operation has completed.
The customer shouldn’t have to interpret a spinning icon as a complete account of what the system is doing. They are booking an appointment, not studying the local weather.
Distinguish orientation from decoration
A purposeful transition can maintain a sense of place. An ornamental background or moving illustration may instead establish mood.
Both can have a place in a brand, but they deserve different priorities when the experience needs to be simplified.
For each effect, ask:
- What does the person learn from the movement?
- Is that information also available without watching it?
- Does the effect delay an action or compete with reading?
- Can the same state be communicated with less movement?
Those questions can make a design review much more concrete than debating whether the site feels exciting enough.
Planning a new site? See how we approach custom website creation.
Design the reduced-motion experience alongside the default
The prefers-reduced-motion media query lets a website respond to a user’s motion preference. The website has to implement the response; the preference does not automatically rewrite all its animations.
Josh Comeau’s tutorials explain both CSS transitions and ways to respect reduced motion. The durable design principle is to provide a complete experience under either preference.
Preserve the meaning when the movement changes
For our booking panel, the reduced-motion version might reveal the details without a sliding or scaling transition. The open state, controls and reading order should remain understandable.
If removing an animation breaks the workflow, inspect whether business logic or visibility has become unnecessarily dependent on an animation event. The system should still reach its correct state.
Also check JavaScript-driven effects and third-party components. A CSS adjustment won’t necessarily control every animation on the page.
W3C’s guidance for WCAG Success Criterion 2.3.3, at Level AAA, addresses disabling nonessential motion animation triggered by interaction.3 Automatically moving content raises related but distinct considerations, including pause and stop controls where applicable.
This is a design review, not a claim that one media query establishes complete accessibility compliance. Keyboard use, assistive technology and other needs remain part of the experience.
Related read: The hero image should stay where we put it.
Give the effects an ordinary day to live through
A showcase clip often presents one effect in isolation. A real visitor may scroll, open a menu, select a filter and receive a notification in quick succession.
Review the combined rhythm on a real page
Test those actions together, with ordinary content and at different screen sizes. Pay attention to what keeps moving while someone is trying to read or make a choice.
A subtle effect repeated twenty times can become the website’s most persistent conversationalist. Reducing the number of animated elements may do more than shortening each animation slightly.
Inspect performance as well. Animations can involve different rendering costs, and the effect should be tested on the devices the audience is likely to use. A polished desktop demonstration doesn’t establish a comfortable mobile experience.
Then try the reduced-motion preference from the start and while the application is in use, according to the supported implementation.
The result should feel intentional in both cases. One visitor gets the considered movement; another gets a quieter route with the same information and control.
That’s the version of personality I want in an interface: enough life to feel considered, and enough manners to let the visitor get on with the task.