Website animations that convert: when to use motion (and when to skip it)

What are website animations?

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:

• The main types of website animation (and where each fits)
• The psychological impact of motion in UX
• Performance and accessibility trade-offs
• A practical “what to use when” framework

Evolution and purpose

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:

• Guide attention to important elements or actions
• Provide visual feedback for interactions
• Create continuity between states or pages
• Explain relationships between elements
• Enhance storytelling and brand personality
• Improve perceived performance during loading

The psychological impact of motion in UX

Motion grabs attention because humans are wired to notice change. That can be useful, but it also means motion is easy to overuse.

Motion captures attention and guides focus

Users scan quickly. Motion can act as a cue that says “look here”.

Examples:

• Button microinteractions (hover, press states) to encourage clicks
• Loading animations to reduce perceived wait time
• Scroll-triggered reveals to encourage exploration

Emotional connection and engagement

Good motion design can make an interface feel more natural and human.

Examples:

• Smooth easing that mimics real-world physics
• Small “success” animations after form submission
• Brand storytelling through motion (illustrated sequences, mascots)

Reinforcing brand identity through motion

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.

Retention and cognitive load

Motion can help users remember content, but too much motion increases cognitive load.

Keep it balanced:

• Use motion to support content, not compete with it
• Prefer functional animations (feedback, progress) over constant decoration
• Respect “reduce motion” settings for accessibility

Types of animations (what to use, and when to avoid)

Below is a practical breakdown of common animation types, plus the trade-offs.

1) Brand video animations

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

• Strong storytelling
• High engagement
• Versatile for marketing

Cons

• Can slow down pages (especially above the fold)
• Passive experience, limited interactivity

Example: Apple’s iPhone landing pages use product video and motion to introduce features.

2) Page transitions

Animations between pages or states (fades, slides, morphs). They can improve perceived smoothness, but overuse makes navigation feel slow.

Pros

• Improves perceived speed by masking load
• Creates a more polished experience
• Reinforces brand through consistent motion

Cons

• Overuse can feel sluggish
• Often requires JavaScript libraries (and careful optimisation)
• Can impact performance if implemented poorly

Tools: Swup.js and Barba.js

3) Scroll animations

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

• Encourages deeper exploration
• Guides attention through the page
• Makes long-form content feel more dynamic

Cons

• Can be distracting
• Heavy implementations can affect performance
• Needs accessibility considerations

Example: Tutorful uses subtle fades and parallax to support storytelling.

4) Lottie animations

Lightweight, vector-based animations rendered from JSON. Great for icons and microinteractions with minimal performance cost.

Pros

• Lightweight and scalable (vs GIF/video)
• Can be interactive
• Sharp at any resolution

Cons

• Requires a library
• Deep customisation can require editing JSON

Example: LottieFiles showcases motion patterns and components.

5) JavaScript animations (GSAP, Three.js, etc.)

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

• Highly interactive
• Great for complex sequences
• Works well for real-time interactions

Cons

• Requires JavaScript expertise
• Poor optimisation can hurt performance

6) Canvas animations

Canvas renders graphics directly, rather than manipulating DOM elements. Great for particles, games, and data visuals.

Pros

• High performance for complex effects
• Ideal for particles and custom visuals
• Enables creative experiences

Cons

• More complex to build and maintain
• Debugging can be harder than DOM-based UI

Example: Google’s Quick, Draw! uses Canvas for real-time interaction

7) CSS animations and transitions

The best starting point for most sites. Cheap, native, and often GPU-accelerated.

Pros

• Lightweight and smooth
• Simple to implement
• Great for microinteractions and UI polish

Cons

• Limited for complex sequences
• Can get messy when you need orchestration

8) WebGL and Three.js (3D)

Used for high-end 3D and immersive experiences. This is powerful, but it is not “free”.

Pros

• Enables true 3D and immersive interaction
• Great for premium product storytelling
• GPU acceleration (when implemented well)

Cons

• Expensive to build
• Resource intensive if not optimised
• Higher risk of accessibility issues

Three.js examples here

9) Microinteractions and UI animations

Small feedback animations: hover, focus, success, loading, validation. High ROI when done right.

Pros

• Improves usability through feedback
• Increases engagement without overwhelming users
• Guides users through tasks

Cons

• Can become distracting if overdone
• Needs accessibility consideration

Which animation type is right for you?

Use this as a starting point:

• Storytelling and branding: brand video, scroll animation, WebGL (selectively)
• Seamless UI: page transitions, CSS transitions, microinteractions
• Interactive or data-heavy experiences: Canvas, JavaScript animation, WebGL (only if you can optimise it)

Accessibility concerns (and how to remedy them)

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.

Common accessibility issues caused by motion

• Excessive motion and parallax can trigger dizziness or nausea
• Autoplaying animations remove user control
• Rapid or flashing motion can create risk for photosensitive users
• Motion-only cues (no text alternative) exclude assistive tech users

How to make animations more accessible

1) Respect “prefers reduced motion”

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

2) Give users a way to disable non-essential motion

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;
}

3) Keep motion subtle and purposeful

Motion should support understanding, not compete with content.

button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-out;
}

4) Do not rely on animation to convey meaning

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>

How animations affect engagement and conversions

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:

• Measure first: if you cannot measure impact, treat it as optional.
• Prioritise performance: heavy animation on the critical path costs conversion.
• Use motion where it reduces uncertainty: form validation, progress, state changes.