Animation on the web exists on a spectrum. On one end, you have functional micro-interactions that make interfaces feel responsive and alive. On the other end, you have a 45-second loading animation that plays every time someone visits your homepage while they wait for a 6MB hero video to buffer.
One of these helps. The other makes people leave. Motion design for the web is the discipline of knowing which is which — and it is a conversion skill as much as a creative one.
The One Rule of Web Animation
The fundamental rule of motion design is this: if it does not serve a purpose, cut it. Animation should communicate state changes, guide attention, provide feedback, or create spatial continuity.
If it is doing none of those things, it is decoration — and decoration that moves is worse than decoration that sits still, because it demands attention it has not earned.
Micro-Interactions That Earn Their Place
Let us start with what works. Hover states and button feedback. When a user hovers over a button and it subtly shifts colour, scales up 2%, or gains a shadow, that is the interface saying "yes, this is interactive."
This is not fancy — it is fundamental. A button without a hover state feels broken. A link without a visited state feels uncertain. These micro-interactions take minutes to implement and make a measurable difference in usability.
Focus states deserve the same care. Keyboard users navigate by focus, and a crisp, animated focus ring tells them exactly where they are. It is the least glamorous animation you will ever ship and one of the most useful.
Page Transitions and Spatial Continuity
Page transitions are the next tier. When navigating between pages in an SPA or a framework like Astro with View Transitions, a brief crossfade or slide maintains spatial context. The user understands they have moved somewhere new without the jarring flash of a full page reload.
The key word is "brief." 200–300 milliseconds. Anything longer and you are adding latency, not polish.
Scroll-Driven Animation: The Sweet Spot for Marketing Sites
Elements fading in as they enter the viewport, progress bars that track scroll position, parallax layers that create depth — these enhance storytelling without blocking interaction.
The CSS scroll-timeline API has made these achievable without JavaScript on modern browsers, which is a massive performance win. No library, no bundle size, no JavaScript execution cost. Motion that used to cost you PageSpeed points is now essentially free.
GSAP vs CSS: Choose the Lightest Tool
For more complex choreography, GSAP remains the gold standard. ScrollTrigger for scroll-based sequences, timelines for coordinated multi-element transitions, and physics-based easing that CSS cannot replicate. We use GSAP on almost every portfolio and marketing site we build — the library is battle-tested, performant, and the API is genuinely well-designed, which is not something you can say about most animation libraries.
But GSAP is not always the answer. If you are animating a single element's opacity on scroll, you do not need a 30KB JavaScript library. CSS will do that with a few lines and zero overhead.
The rule: simple transitions, CSS. Complex timelines, GSAP. 3D interactions, Three.js. Choose the lightest tool that gets the job done.
Animation That Kills Conversions
Now, what does not work. This is where motion design stops being a taste question and starts costing you money — the same maths that drives conversion-focused web design applies to every frame of motion you ship.
Entrance animations on repeat
Entrance animations that replay every single time an element enters the viewport. You scroll down, elements fade in. You scroll back up and down again, they fade in again. This is the default behaviour of most "animate on scroll" libraries, and it is maddening. Animate once. Then stop. The user has seen it — they do not need a performance.
Loading animations that outlast the content
If your skeleton screen or spinner is visible for 3 seconds because you are loading a 2MB JavaScript bundle, the animation is not the solution — the bundle size is the problem. Do not polish the symptom.
Janky parallax
If your parallax effect is not running on the compositor thread — meaning it is animating properties other than transform and opacity — it will cause repaints, stutter on mid-range devices, and create a worse experience than no animation at all. Test on a real phone. Not your M3 MacBook. A $300 Android phone on a 4G connection. That is your benchmark.
Auto-playing carousels
I have said it before and I will keep saying it: carousels are where conversions go to die. The animation is distracting, the timing is arbitrary, and users never see past the second slide. A static section with a clear message will outperform an animated slider every single time. The data has been clear on this for over a decade.
Accessibility: Respect prefers-reduced-motion
Accessibility is not optional. Always respect prefers-reduced-motion — a single CSS media query that disables or reduces animations for users who have requested it. That includes people with vestibular disorders, motion sensitivity, or simply a preference for stillness.
Wrapping your animations in this check is the bare minimum. In GSAP, you can use gsap.matchMedia() to conditionally apply animations based on this preference.
The Verdict
The best motion design is invisible. It does not announce itself or demand applause. It makes the interface feel effortless and responsive — and when it is removed, something feels wrong, even if the user cannot articulate what.
That is the standard to aim for: motion that guides attention toward action instead of stealing attention from it. It is exactly how we approach animation inside our UX design service — purposeful, performant, and always in service of the user's next step.