Good animation answers a user's question: “Did that register?”, “What changed?”, “Where did this come from and where did it go?”. Most interface animations fit within 100–500 ms, slow down as they settle, animate only transform and opacity, and switch off when someone has asked their system to reduce motion. Animation that explains nothing and only adds delay or pulls attention away from the call to action hurts the product, however beautiful the effect.
After this you will be able to
- Explain which user question an animation answers and tell functional motion from decoration
- Pick a duration within 100–500 ms and an ease-out or ease-in curve for the task
- Name the properties that are safe to animate (transform, opacity) and those that trigger layout
- Describe what changes when “reduce motion” is on and what WCAG 2.3.3 and 2.2.2 require
Know beforehand
Contents
Why interfaces need motion
A microinteraction is a short movement in response to an action: a button presses in slightly, a switch slides across, a product card flies into the cart. Motion in the broader sense covers everything that moves on screen, including page transitions and scroll animations. Nielsen Norman Group boils useful animation down to a few jobs: feedback, state changes, navigation metaphors and hints about how an element behaves.
- Feedback — the system shows it noticed the tap
- State change — it's clear what exactly changed: switched on, expanded, saved
- Continuity — you can see where a dialog came from and where a deleted row went
- Attention — motion guides the eye to what actually matters right now
Where animation helps
Feedback
- Example
- A button changes on press, a checkmark draws itself after ticking
- What the user gets
- Confidence that the action was accepted
State change
- Example
- A toggle glides across, “Send” turns into “Sent”
- What the user gets
- A clear sense of the element's current state
Spatial transition
- Example
- A product card expands to full screen, a side panel slides in from the edge where its button was
- What the user gets
- People keep their bearings and know how to get back
Hint
- Example
- A list bounces slightly at the end, signalling there's nothing more
- What the user gets
- The interface's behaviour becomes obvious without instructions
Waiting
- Example
- A skeleton with a soft shimmer instead of a blank screen
- What the user gets
- Loading feels alive rather than frozen
On InterLAB projects we start with these functional animations and only then discuss “wow effects”. Careful feedback on every button makes a product feel more premium than one spectacular screen ever will.
Duration and easing
The most common mistake is animation that runs too long. In its breakdown of animation timing, Nielsen Norman Group gives these reference points:
100 ms100 ms
simple feedback: a checkbox, a toggle
200–300 ms200–300 ms
larger screen changes, such as a modal appearing
500 ms500 ms
the point where animation starts to feel like a drag
- Easing — the speed curve — matters more than duration: linear motion looks mechanical and unnatural
- For entrances, ease-out usually works best: a quick start and a soft landing let the eye predict where the element will stop
- For exits, ease-in is sometimes used — the element accelerates away
- Make exits slightly shorter than entrances: a dialog might open in 300 ms and close in 200–250 ms
- The bigger the element and the distance, the longer the motion; small details should be quick
Scroll-driven animation
Scroll-driven motion is movement tied to scrolling: blocks fade in, images shift at different speeds, a video plays as the page moves. It's a powerful tool for promo pages and product storytelling — and the main source of irritation when overdone. CSS now has native scroll-driven animations (documented on MDN) that don't weigh the page down with scripts, but check browser support and keep a fallback.
Helps
- Blocks fading in gently as they enter the viewport
- One signature mechanism that explains the product, such as a device assembling as you scroll
- A reading-progress indicator on a long article
- A header that shrinks to make room for content
Hurts
- Scroll hijacking: the page moves differently from the wheel or finger
- Text that fades in so slowly you have to wait for it
- Animation on every single block — the effect stops meaning anything
- A price or call-to-action button that arrives last
Performance: what to animate
How smooth an animation feels depends on which properties change. To produce a frame, the browser goes through several stages, and the earlier the stage you touch, the more each frame costs. web.dev recommends animating only transform and opacity wherever possible and avoiding properties that trigger layout or paint.
- 01StyleThe browser works out which CSS rules apply to which elements
- 02LayoutSizes and positions are recalculated — triggered by width, height, top, margin
- 03PaintPixels are filled in: colours, shadows, backgrounds
- 04CompositeFinished layers are assembled — this is where transform and opacity work, the cheapest stage
- Move and scale with transform, not top, left or width
- Fade with opacity, not by toggling display or height
- Avoid animating shadows and blur over large areas unless you must
- Test on an inexpensive Android phone, not just a powerful laptop
- Load heavy effects only where they're actually visible
Accessibility: respect prefers-reduced-motion
For some people, large on-screen motion causes dizziness and nausea — parallax, zooming and abrupt transitions above all. iOS, Android, Windows and macOS all have a “reduce motion” setting, and a website can detect it with the prefers-reduced-motion media query (documented on MDN and web.dev). WCAG 2.3.3 recommends letting users disable motion triggered by interaction, and criterion 2.2.2 requires that automatically moving content lasting more than five seconds can be paused.
Check the setting
If the user has turned on “reduce motion”, switch off large movements, parallax and auto-scrolling.
Replace, don't remove
Swap a slide-in for a gentle fade: the feedback stays, the queasy motion goes.
Offer a pause
Carousels, tickers and background video can be stopped with a button.
Test by hand
Turn the setting on in a phone and walk through the site's key journeys.
When motion costs you leads
Nielsen Norman Group notes that motion in peripheral vision — a chat widget popping up, a banner sliding in — distracts from the main task, and that the least distracting option is often no animation at all. For a website whose job is to generate enquiries, that's a direct risk.
- A logo preloader before the site appears — people wait for a splash screen
- Heavy effects that make the page load slowly and stutter on phones
- Pop-ups and widgets that slide in while someone is reading
- Animated elements next to a form that distract from filling it in
- Effects for their own sake that don't address a single customer concern
The best animation is the one users don't notice — but without it, the interface would instantly feel wooden.
Sources
- Nielsen Norman Group — The Role of Animation and Motion in UX
- Nielsen Norman Group — Executing UX Animations: Duration and Motion Characteristics
- Nielsen Norman Group — Animation for Attention and Comprehension
- web.dev — How to create high-performance CSS animations
- web.dev — prefers-reduced-motion: Sometimes less movement is more
- MDN — prefers-reduced-motion CSS media feature
- MDN — CSS scroll-driven animations
- W3C WAI — Understanding SC 2.3.3: Animation from Interactions
- W3C WAI — Understanding SC 2.2.2: Pause, Stop, Hide
- Apple Human Interface Guidelines — Motion