Motion with Restraint
The best web animations are the ones users barely notice. Motion should guide attention, confirm actions, and smooth transitions—not perform for its own sake.
The Case Against Motion for Its Own Sake
Web animation has a spectacle problem. The availability of sophisticated animation libraries and CSS capabilities has made it trivially easy to add motion to any element on the page. Scroll-triggered reveals, parallax layers, magnetic cursor effects, staggered entrance animations, physics-based spring interactions—the toolkit is vast. And the temptation to use all of it is strong, particularly when the goal is to impress.
But impressive and effective are different things. Motion that exists to demonstrate technical capability or to make a portfolio piece more eye-catching is motion that serves the designer, not the user. The user wants to read the content, navigate the site, and complete their task. Motion either helps with that or gets in the way.
Restraint in motion design means choosing animation that has a clear functional purpose, executing it with appropriate timing and easing, and knowing when stillness is the better choice. This is harder than it sounds, because the most effective motion is often the least noticeable—subtle transitions that smooth the experience without drawing attention to themselves.
Functional Motion Categories
Not all animation serves the same purpose. Understanding the functional categories helps make better decisions about where motion adds value and where it adds clutter.
Transition motion smooths the change between states. Page transitions, content loading, accordion expansion, tab switching—these are moments where the interface changes structure, and smooth motion helps the user understand what happened. Without transition motion, state changes feel abrupt and disorienting. With excessive transition motion, they feel sluggish.
Feedback motion confirms that an interaction was registered. Button press animations, form submission indicators, hover states, toggle responses—these tell the user that their action produced an effect. Feedback motion should be near-instantaneous (under 150 milliseconds) and should feel crisp rather than elastic.
Attention motion directs the user's gaze to something they should notice. A notification badge that pulses briefly, a newly loaded element that fades in, an error message that shakes once—these use motion to create a hierarchy of attention. The key word is briefly. Attention motion that persists becomes distraction. A pulsing badge that never stops pulsing becomes noise.
Decorative motion serves no functional purpose. Parallax backgrounds, floating particles, continuous animations on static elements—these exist for aesthetic effect. Decorative motion is not inherently wrong, but it carries the highest risk of becoming a performance cost and an accessibility issue with the lowest functional return.
Timing and Easing
The timing of an animation determines whether it feels responsive or sluggish. Human perception research provides useful guidelines: interactions should respond within 100 milliseconds to feel immediate. Transitions between 200 and 500 milliseconds feel smooth and intentional. Anything over 500 milliseconds risks feeling slow.
For web interfaces, most transitions should fall in the 200 to 300 millisecond range. Page transitions can extend to 400 milliseconds. Micro-interactions (button presses, hover states, toggles) should be 100 to 200 milliseconds.
Easing—the acceleration curve of the animation—affects how natural the motion feels. Linear easing (constant speed) feels mechanical and robotic. Ease-out (fast start, slow finish) feels responsive because the motion reacts quickly to the trigger and settles gently. Ease-in-out (slow start, slow finish) feels deliberate and is appropriate for transitions where both the start and end states should feel settled.
Custom cubic-bezier curves give fine control over the acceleration profile. A common starting point for interface transitions is cubic-bezier(0.25, 0.1, 0.25, 1), which provides a gentle ease-out that feels natural without being sluggish.
Scroll-Triggered Animation
Scroll-triggered animation—elements that animate into view as the user scrolls down the page—is one of the most common and most abused motion patterns on the web. When done well, it creates a sense of content revealing itself as the user explores. When done poorly, it creates a page where nothing is visible until the user scrolls to it, content jumps around unpredictably, and the reading experience feels like navigating an obstacle course.
The restraint principles for scroll animation: animate only on first entry (do not re-animate when the user scrolls back up), use simple transitions (fade and subtle vertical shift—no spinning, bouncing, or scaling), keep the animation duration short (200 to 300 milliseconds), and stagger only when the stagger serves a purpose (staggered list items can communicate sequence; staggered paragraph entry is just distracting).
Content that is essential to comprehension should not depend on scroll animation to become visible. If the scroll trigger fails—because JavaScript is delayed, because the intersection observer does not fire, because the user scrolls too quickly—the content must still be present and readable. Scroll animation is enhancement, not requirement.
Respecting Motion Preferences
Some users experience motion sickness, vestibular disorders, or cognitive difficulties that are exacerbated by screen animation. The prefers-reduced-motion media query allows the site to detect when a user has requested reduced motion in their operating system settings.
Respecting this preference is not optional. When prefers-reduced-motion: reduce is active, the site should: disable all decorative animation, replace transitions with instant state changes or very short (under 100 milliseconds) fades, disable parallax and scroll-triggered motion effects, and maintain all functional state changes without the animation component.
The implementation is straightforward with CSS:
```css
@media (prefers-reduced-motion: reduce) {
, ::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
```
This blanket approach is a reasonable starting point, but a more nuanced implementation selectively disables non-essential animation while preserving functional feedback motion at reduced intensity.
Performance Considerations
Animation performance on the web depends on which CSS properties are being animated. Properties that trigger layout recalculation (width, height, margin, padding, top, left) are expensive to animate because the browser must recalculate the position of potentially every element on the page for each animation frame.
Properties that can be handled by the GPU compositor (transform and opacity) are inexpensive to animate because they do not trigger layout or paint. A slide transition implemented with transform: translateX() is dramatically more performant than the same visual effect implemented with left.
For web motion, the performance rule is simple: animate only transform and opacity whenever possible. If a design requires animating layout properties, consider whether the visual effect can be achieved through transforms instead. A card expanding on hover can use transform: scale() rather than animating width and height, achieving a similar effect without the performance cost.
Test animation performance on lower-powered devices. A smooth 60fps animation on a development MacBook may stutter on a three-year-old Android phone or a budget laptop. If the animation does not perform well on mid-range hardware, simplify it.
Motion in Context: When to Say No
The most important motion design skill is recognising when stillness is the better choice. Not every state change needs a transition. Not every page load needs an entrance animation. Not every hover state needs a visual response beyond a colour change.
A content-heavy journal page does not benefit from scroll-triggered animations on every paragraph. A form with six fields does not need staggered entrance animations. A navigation menu that the user opens multiple times per session does not need a dramatic expansion animation after the first visit.
The test is simple: does this animation help the user understand what happened, where they are, or what they should do next? If the answer is no, the animation is decorative. Decorative animation is not forbidden, but it should be the exception, not the default.
Frequently Asked Questions
How do I convince stakeholders that less animation is better?
Frame it in performance and accessibility terms. Excessive animation increases page weight, reduces performance on mobile devices, and creates accessibility barriers. These are measurable concerns that translate to business impact.
Should loading states be animated?
Yes. Loading states are one of the most valuable applications of animation. A subtle progress indicator or a skeleton screen with a shimmer effect communicates that the system is working. Static loading states feel broken.
What about page transitions in single-page applications?
Keep them brief (200 to 300 milliseconds) and use opacity transitions rather than positional movement. The transition should smooth the content change without making the user wait for the animation to complete before they can read the new page.