Web animations have evolved from simple gimmicks into practical UX tools. Used well, motion can guide users through content, provide feedback, and make interfaces feel more “alive”. Used badly, it creates friction, hurts performance, and can be a genuine accessibility barrier.
At their core, animations change visual properties like position, size, opacity, colour, or transform to create the illusion of movement.
In this guide, we’ll cover:
Web animation has moved from GIFs and Flash to modern CSS, JavaScript, SVG, and WebGL. The role has also changed: it is no longer just “visual polish”. It can be a strategic tool that helps users understand and complete actions.
Common jobs animations can do:
Motion grabs attention because humans are wired to notice change. That can be useful, but it also means motion is easy to overuse.
Users scan quickly. Motion can act as a cue that says “look here”.
Examples:
Good motion design can make an interface feel more natural and human.
Examples:
Animation should match the brand. A B2B SaaS site usually benefits from restrained, fast motion. A creative studio can be more expressive.
One study reported interactive animated elements increasing brand recall compared to static designs.
Motion can help users remember content, but too much motion increases cognitive load.
Keep it balanced:
Below is a practical breakdown of common animation types, plus the trade-offs.
Short clips that introduce a brand, product, or story. Useful on landing pages and campaigns, but they are heavy and usually non-interactive.
According to Wyzowl, 84% of people say they’ve been convinced to buy a product or service after watching a brand’s video.
Pros
Cons
Example: Apple’s iPhone landing pages use product video and motion to introduce features.
Animations between pages or states (fades, slides, morphs). They can improve perceived smoothness, but overuse makes navigation feel slow.
Pros
Cons
Effects triggered as users scroll (reveals, parallax, pinned sections). Useful for storytelling, but easy to overdo, and can be heavy on low-end devices.
Pros
Cons
Example: Tutorful uses subtle fades and parallax to support storytelling.
Lightweight, vector-based animations rendered from JSON. Great for icons and microinteractions with minimal performance cost.
Pros
Cons
Example: LottieFiles showcases motion patterns and components.
JavaScript libraries enable highly custom motion and interaction. Powerful, but they can wreck performance if you ship too much to the main thread.
Libraries: GSAP, Three.js, Anime.js
Pros
Cons
Canvas renders graphics directly, rather than manipulating DOM elements. Great for particles, games, and data visuals.
Pros
Cons
Example: Google’s Quick, Draw! uses Canvas for real-time interaction
The best starting point for most sites. Cheap, native, and often GPU-accelerated.
Pros
Cons
Used for high-end 3D and immersive experiences. This is powerful, but it is not “free”.
Pros
Cons
Small feedback animations: hover, focus, success, loading, validation. High ROI when done right.
Pros
Cons
Use this as a starting point:
Animations can be a barrier for people with motion sensitivity, cognitive disabilities, or visual impairments. Poorly implemented motion can trigger vestibular issues and make a website genuinely unusable.
If you want a deeper overview of accessibility barriers and design patterns, the W3C resource is a solid baseline.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
If your audience includes motion-sensitive users, add a visible “reduce motion” toggle.
document.getElementById("motionToggle").addEventListener("click", function () {
document.body.classList.toggle("reduced-motion");
localStorage.setItem(
"reduceMotion",
document.body.classList.contains("reduced-motion"),
);
});
.reduced-motion * {
animation: none !important;
transition: none !important;
}
Motion should support understanding, not compete with content.
button:hover {
transform: scale(1.05);
transition: transform 0.2s ease-out;
}
If animation communicates status (loading, success, error), provide a text alternative.
<div class="loading-container">
<div class="spinner" aria-hidden="true"></div>
<p class="loading-text" aria-live="polite">Loading content, please wait...</p>
</div>
Animations can improve engagement and conversion when they reduce friction, guide attention, and make feedback clearer. They can also hurt conversion when they slow down key pages or distract users from the action.
A simple way to keep this honest: