Animations and motion: when they help and when they hurt
The rules we apply to motion on business websites: what it should do, how much, how fast, and how to respect visitors who have asked for less of it.
The short answer
Motion on a website should do a job: show where a panel came from, confirm that a tap registered, draw the eye to what changed, keep the visitor oriented when a page changes. Motion that only decorates, elements flying in on scroll, backgrounds that drift, counters that tick up, costs attention, delays content, adds script weight and, for a meaningful share of visitors, causes real discomfort. The rules we apply are simple. Motion is purposeful, short and subtle, a few hundred milliseconds with natural easing, and consistent across the site so the same gesture always means the same thing. Every animation is reduced or removed when the visitor’s device asks for reduced motion, a setting that people with vestibular disorders and motion sensitivity depend on. Only the cheap properties are animated, libraries stay out unless they earn their weight, and everything is tested on a mid-range phone, because that is where motion stutters first.
When motion helps and when it hurts
| Situation | Helps | Hurts |
|---|---|---|
| Opening a menu or panel | A short slide or fade from where it lives | A bounce, a delay before it is usable |
| Pressing a button | Instant visual acknowledgement | A long animation before the action happens |
| Changing page | A transition that preserves context, like a shared header | A full-screen effect on every navigation |
| Content appearing on scroll | Nothing, or a subtle fade once | Elements flying in from the sides, staggered, on every section |
| Drawing attention | One subtle highlight of what changed | Pulsing, blinking, continuous movement |
| Loading | A calm indicator after a short delay | A spinner for everything, instantly |
| Backgrounds and heroes | Still, or a single short reveal | Parallax, auto-playing motion, video with no pause |
| Numbers and statistics | Shown | Counting up as you watch |
Our rules for motion
- Every animation answers a question: where did this come from, what changed, did that work?
- Durations of roughly one to three hundred milliseconds for interface motion; nothing longer without a reason.
- Easing that decelerates into place; no bounces on business sites.
- Consistency: one pattern per kind of change, used everywhere.
- Reduced motion respected on every animation, tested by switching the setting on.
- Only transform and opacity animated; never properties that trigger layout.
- No animation library unless a specific need justifies its weight; the browser can do most of it.
- Nothing auto-plays without a pause control; nothing flashes.
- Tested on a mid-range phone, where stutter appears first.
Where a little motion earns its place
Menus and panels that arrive from where they logically live. Buttons and form fields that acknowledge interaction immediately. Page transitions that keep the header and orientation steady. Focus indicators that move clearly for keyboard users. A single, subtle highlight when something the visitor did changes something on the page. That is most of the motion a business site needs, and it fits in a few dozen lines of styling.
What this means for you
Use motion to explain, not to decorate: short, subtle, consistent, cheap to render, tested on a phone, and reduced or removed for visitors who have asked for less. A business site with a handful of purposeful animations feels faster and more considered than one that moves everywhere, and it does not make anyone feel ill.
Frequently asked questions
Do animations make a site feel more professional?
A few well-judged ones can: a smooth reveal of a menu, a button that acknowledges a tap, a page transition that preserves context. Many animations make a site feel slow and self-regarding, and elements that fly in as you scroll delay the content you came for. Professional sites tend to have less motion than people expect, applied consistently and purposefully.
What is reduced motion and why does it matter?
A setting in every major operating system through which people ask for less animation, used by people with vestibular disorders, motion sensitivity, migraines and attention conditions, for whom parallax, large movements and auto-playing motion cause discomfort or nausea. Websites can detect the setting, and respecting it means replacing large or continuous motion with instant changes or subtle fades. It is part of accessibility, and it costs almost nothing to implement.
Do animations slow the site down?
They can, in two ways: animation libraries add script weight that delays the page, and animating the wrong properties forces the browser to redo layout on every frame, which stutters on phones. Animating only transform and opacity, using the browser's built-in capabilities rather than libraries where possible, and keeping motion short keeps the cost negligible.
Sources
- MDN Web Docs: prefers-reduced-motion (accessed 2026-09-12)