Designing Motion That Earns Its Place

Motion is the easiest thing to overdo in an interface and the hardest thing to get exactly right. Every studio can add an entrance animation. Very few can explain why that specific animation, at that specific speed, in that specific place.

Motion should answer a question the interface already asked

When a card lifts on hover, it's answering "is this clickable?" When a form field's label floats up, it's answering "what was I about to type here?" If an animation doesn't answer a question the user is implicitly asking, it's decoration — and decoration is the first thing to cut when a page needs to get faster.

Easing curves are not a personal preference

We default to custom cubic-bezier curves over built-in easings for almost everything, because the built-in options were never designed with intent — they were designed to be safe defaults. A curve like cubic-bezier(0.16, 1, 0.3, 1) decelerates the way objects actually feel like they're settling into place, and that physical honesty is what separates motion that feels premium from motion that feels like a template.

Stagger sparingly

Staggered reveals are one of the most reached-for techniques in cinematic web design, and one of the most overused. A staggered list of six items reads as intentional. A staggered list of sixty reads as a loading spinner in disguise, and costs your user real time waiting for content that was already available.

The best test is silence

We turn the sound off, slow the screen recording to 0.5x, and watch every transition in isolation. If a piece of motion doesn't hold up under that scrutiny — if it looks arbitrary rather than considered — it doesn't ship.