Motion Design on the Web: When It Helps, When It Hurts

Motion is the fastest way to make a website feel premium, and the fastest way to make it feel amateurish. The difference isn’t the amount of animation. It’s whether each piece of motion is saying something. Here’s how we decide.

Motion is communication, not decoration

Every animation should answer a question the user is silently asking:

• “Did that work?”, a button that confirms the tap, a form field that acknowledges input.
• “Where am I now?”, a page transition that shows you moved, a menu that slides from where you clicked.
• “What’s important here?”, a scroll reveal that brings the eye to the next idea.
• “Is something happening?”, a loading state that says “yes, working” instead of a frozen screen.

When motion answers one of those, it’s doing a job. When it’s just… moving, it’s noise, and noise is exactly what makes a site feel AI-generated or template-y, the thing a brand paying for distinctive work is trying to avoid.

The motion that earns its place

• State feedback. The small stuff: hover, press, focus, success. This is where motion does the most work for the least flash. A button that responds crisply feels more expensive than any hero animation.
• Orchestrated page-load. One considered entrance sequence, content resolving into place, lands harder than a dozen scattered effects. Choreography beats confetti.
• Scroll-driven storytelling. When a page has a narrative (a case study, a product tour), motion tied to scroll can pace the story. Used on our Works showcase for exactly this reason.
• Meaningful transitions. Elements that move from where they were to where they’re going give the interface a sense of place and continuity.

The motion that repels

• Everything animating on scroll. If every element fades up as you scroll, nothing stands out and the page feels sluggish. Reveal the things that matter; let the rest just be there.
• Slow animations. Anything over ~400ms on an interaction feels laggy. Users perceive fast UI as quality; a “smooth” 800ms transition reads as waiting.
• Carousels that auto-rotate. Nobody sees slide two, and the movement steals attention from the content that matters.
• Motion with no reduced-motion fallback. Some people get motion sickness from parallax and big transitions. Respecting prefers-reduced-motion isn’t optional, it’s accessibility, and it’s a one-line consideration in a good build.

Performance is part of motion

Janky animation is worse than none. Motion that drops frames on a mid-range phone actively makes a product feel cheap. Good web motion animates only the cheap-to-render properties (transform and opacity), respects the device, and never fights Core Web Vitals, animation that causes layout shift is a bug wearing a bow tie.

The rule we build by

Spend your motion budget in one place, and keep everything around it quiet. One memorable moment plus crisp, honest feedback everywhere else beats a page that won’t sit still. If you can’t say what a piece of animation is for, cut it, the restraint is what reads as craft.

Want a site that moves with intent rather than for attention? That’s the kind of motion we build, see it in our work.

Motion held to this standard is what our motion and interaction service delivers.