Motion is one of the most misused tools in web design. Done well, it directs attention, confirms interactions and makes a website feel alive and considered. Done badly, it distracts users, obscures hierarchy and damages page performance. The difference is whether every animation has a job.
The purpose test: does this animation do something?
Every animation on a website should pass a purpose test: what does this motion communicate that a static layout doesn't? Valid purposes include revealing content hierarchy as the user scrolls (drawing attention to what's important), confirming an interaction (a button press, a form submission, a state change), smoothing a navigation transition (so the user doesn't lose spatial context), or drawing attention to a call to action. Motion that fails this test is decoration that costs load time and user attention.
Scroll-triggered reveals
Scroll-triggered animations — content that fades or slides into view as the user scrolls — are the most common form of web design motion and the most commonly over-used. Used selectively, they direct attention to key content at the moment it becomes relevant. Used on every element on every page, they make the website feel restless and difficult to read. The rule: reveal the content the user should notice next, not everything simultaneously. Restraint is what makes scroll animations feel designed rather than automated.
Transition design: the invisible craft
Page and component transitions are where motion design has the highest invisible impact. A route transition that cross-fades rather than cutting abruptly makes single-page applications feel coherent — the user maintains spatial awareness as they navigate. A modal that scales from its trigger point rather than appearing from nowhere communicates how the UI is structured. These transitions aren't showy; they're spatial grammar that makes a website feel like a designed environment rather than a collection of separate pages.
Easing: the physics of perceived quality
The easing curve of an animation communicates quality more than its duration or distance. An animation with linear easing feels robotic and unnatural. An animation with ease-out (fast start, slow end) feels natural and confident — it moves like a physical object slowing to a stop. Ease-in-out (slow start, fast middle, slow end) signals consideration and refinement. For UI interactions, ease-out is the default choice of most premium web design systems. The difference between a custom website that feels premium and one that feels cheap often comes down to easing curves.
Performance: GPU-accelerated properties only
Web animations that perform well — at 60fps on mobile — use only GPU-composited properties: transform (translate, scale, rotate) and opacity. Animations that change layout properties (width, height, margin, padding) trigger browser layout recalculation, which is expensive and creates jank on mobile devices. A common web design and development error: animate width or height for a reveal effect, producing choppy animation on anything but a top-spec desktop. The fix: use transform: scaleY() and opacity instead.
Reduced motion: a non-negotiable
The prefers-reduced-motion media query should be implemented in every website that uses motion. Some users experience vestibular disorders, motion sickness or neurological conditions that make animated interfaces genuinely harmful. For these users, animations should either stop or be replaced with immediate state changes. This isn't optional in an accessible web design — it's a basic requirement. The good news: implementing reduced motion correctly takes an hour and requires no design compromises for users who don't need it.
Motion and brand personality
The way a website moves communicates brand personality in a way static design cannot. Animations that are quick and confident signal decisiveness. Animations that ease in gently signal approachability. Micro-interactions that spring back with slight overshoot signal playfulness. The motion design system of a custom website should be as deliberate as the typographic system — not an afterthought added by a developer choosing default settings, but a designed expression of how the brand wants to feel in motion.