Motion and Micro-interactions: When Animation Helps and When It Hurts

Motion Has a Job or It Has No Business Being There

The useful test for any animation is simple: what does the user understand afterwards that they did not understand before? If there is no answer, the motion is decoration, and decoration on an interface is a cost paid by every visitor on every visit.

That is not an argument for static pages. It is an argument for motion that carries meaning, which turns out to be a fairly short list of jobs.

The Four Things Animation Legitimately Does

The first is showing where something came from. A panel that slides out from the button you pressed tells you that the two are connected and where it will go when you dismiss it. The same panel appearing instantly forces you to work that out.

The second is confirming an action. A button that responds when pressed removes the moment of doubt in which people press it again. The third is communicating progress, which is what makes a two-second wait feel shorter than a one-second wait with no feedback. The fourth is directing attention — moving one element while everything else is still is the strongest signal an interface has, which is exactly why it should be rationed.

Duration and Easing Are Meaning, Not Taste

Interface motion lives in a narrow band. Roughly a tenth to a third of a second reads as responsive; longer starts to feel like waiting, and by half a second the animation is delaying the person rather than informing them. Larger objects can take slightly longer than small ones, because that matches how weight behaves.

Easing carries meaning too. Something entering should decelerate as it arrives, something leaving can accelerate away, and linear motion looks mechanical because almost nothing in the physical world moves that way.

The Failures That Cost You Visitors

The most common is the entrance animation on content. A visitor arrived to read something, and the text fades in over 800 milliseconds, sequentially, per section. The first time it is elegant. On the third page it is an obstacle, and for a returning customer it is a daily tax.

The second is motion tied to scroll position in a way that fights the user. Hijacking the scroll, or pinning a section while an animation plays, takes away the one control people rely on to navigate a page. If someone wants to get to your pricing, the site should not be negotiating with them about it.

Animation That Delays Interaction

The worst category is motion that blocks input. A menu that cannot be used until its animation finishes, a modal that ignores clicks during its entrance, a carousel that will not respond mid-transition — each of these makes a fast interface feel broken, because responsiveness is judged from the first moment of intent, not the end of the animation.

Make elements interactive as soon as they are visible, and let a new interaction interrupt an animation in progress. That single rule fixes most perceived sluggishness.

Performance Is Part of the Design

Animation is not free. Properties that require the browser to recalculate layout are expensive, and the cost shows up as stutter on exactly the mid-range devices most of your visitors are using rather than on the machine the design was approved on.

Prefer transforms and opacity, keep the number of simultaneously animating elements small, and test on a real mid-range phone rather than a simulator. Heavy motion also interacts badly with loading: an animation that runs while the page is still assembling itself will show up in the metrics covered in our Core Web Vitals guide.

Loading States Are Motion Too

The most valuable animation on most sites is the one that runs while people wait. A skeleton that shows the shape of what is coming reduces perceived wait more than a spinner, because it tells the reader something is arriving and roughly what it is. A spinner only says the site is busy.

Match the treatment to the duration. Under about a second, showing nothing is usually better than a flash of a loader that appears and vanishes. Beyond a few seconds, people need progress rather than motion, and beyond ten they need an estimate or a way to leave without losing what they were doing.

Reduced Motion Is a Requirement, Not a Nicety

For some people, parallax, large sliding transitions and looping background motion cause genuine physical discomfort — nausea, dizziness, or worse. Operating systems provide a setting for this, and respecting it is a straightforward accessibility obligation rather than a courtesy.

Honouring it does not mean removing all motion. It means replacing the vestibular triggers — large movement across the viewport, parallax, spinning — with a simple fade or an instant change, while keeping the small feedback animations that help everybody. This belongs alongside the other requirements in our accessibility guide.

Autoplay and Looping Backgrounds

Anything that moves continuously competes with your own content for attention and never stops competing. Looping video backgrounds behind headlines are the clearest example: they cost bandwidth, they reduce text contrast unpredictably, and they make the reader work harder to do the one thing you wanted them to do.

Making It Survive the Build

Motion is the part of a design most likely to be lost or mangled between the mockup and the live site, because a static file cannot specify it. Write the timings, easings and triggers down as part of the specification, and review them in the browser rather than approving them from a video.

Standardising a small set of durations and easings in the design system stops every new page inventing its own, which is what produces sites that feel subtly inconsistent without anyone being able to say why. Both points are part of the handover discipline in our guide to design QA.

Hover Is Not Available to Everyone

A large share of your visitors are on touch screens where hover does not exist, so any meaning carried only by a hover state is meaning they never receive. If a card reveals its action on hover, on a phone that action is either invisible or triggered by accident on the first tap.

Design the touch behaviour first and treat hover as an enhancement for the people who have a pointer. The same applies to keyboard users, who need a visible focus state that is at least as clear as the hover state — and who are the first to notice when an animated component forgets they exist.

A Reasonable Default Position

Start with no animation and add it where it answers a question the user is actually asking: where did this come from, did that work, how long will this take, where should I look. Everything else is a candidate for removal.

If motion is central to your brand, spend the budget in one considered place — a hero, a signature transition — rather than distributing it across every section. Restraint reads as confidence. If you want that judgement applied to your interface, our UI/UX team treats motion as part of the interaction specification, not a finishing pass, and builds it into the design system so it stays consistent as the site grows.