# Motion that does work

> Interface motion is not decoration. It explains where something came from, and it is the cheapest continuity you can buy — if the curve is right.

*Published 2026-03-17 · 8 min read · Motion, UX, Craft*
Source: https://www.linesandframes.com/blog/motion-that-does-work

## The short version

- Interface motion should answer one of three questions: where did that come from, what changed, what is loading.
- Continuity beats animation — preserving an object across a context change orients people; entrance effects do not.
- The curve matters more than the duration: a long dead tail reads as broken even at a short total time.
- Design the reduced-motion version deliberately instead of setting every duration to zero.

Motion gets justified with the word delight, which is why so much of it is noise. The useful framing is duller and more demanding: motion exists to answer where did that come from, what just changed, and what is still loading. Anything that answers none of those is decoration competing with the content.

## Continuity beats animation

The most valuable moves are the ones that preserve an object across a change of context. A card that grows into the page it opens keeps the reader oriented; the same page arriving as a cross-fade asks them to re-find themselves. This is why shared-element transitions repay their cost and why decorative entrance animations rarely do.

The test is whether the thing you were looking at is still the thing you are looking at. If the answer is no, the transition has spent attention rather than saved it.

## Curves carry more meaning than duration

Teams argue about milliseconds and ignore the shape. A curve that front-loads almost all of its movement and then creeps for the last few per cent reads as broken even at a short duration, because the eye registers the arrival early and then waits. Motion feels fast when it lands decisively, not when the number is small.

- Pick one exit curve and one entrance curve for the whole product, and keep the exceptions countable.
- Watch for dead tails: if the movement looks finished before it is, flatten the curve rather than only shortening the time.
- Match the durations of things that happen together, or the eye will read them as sequential and the moment will feel disjointed.
- Scale duration with distance, not with importance. A long travel needs longer; a big announcement does not.

### What to animate

Transform and opacity, almost exclusively. They can be handed to the compositor, so they hold frame rate on hardware you do not control. Animating width, height, top or left forces layout on every frame, which is where scroll-linked effects usually start to stutter — and scroll is exactly where jank is most visible.

## Scroll-driven motion needs a budget

Pinned sections and scroll-scrubbed animation are the most impressive and the most expensive motion available. Two rules keep them honest: nothing may block the reader from getting past it, and the effect must degrade to a plain layout when motion is reduced. If a section cannot be skipped by scrolling normally, it is a hostage situation, not a feature.

## Respect the people who turned it off

Reduced-motion is not a compliance checkbox to satisfy with instant transitions. It is a request to remove movement that could cause discomfort — parallax, scroll-driven scaling, large travel — while keeping the state changes legible. That usually means designing the still version of the interface deliberately, rather than deriving it by setting every duration to zero.

> If you cannot say which question a movement answers, it is competing with your content for attention it did not earn.

A useful audit: list every animation in the product, write the question each one answers, and delete the ones with an empty cell. It is the fastest way to make an interface feel calmer without redesigning anything.

## Questions we get asked

### How long should UI animations be?

Long enough to be followed and short enough not to be waited on — but the curve matters more than the number. Motion that front-loads its movement and then creeps for the last few per cent feels broken even at 300ms, because the eye registers arrival early.

### What should prefers-reduced-motion actually do?

Remove movement that can cause discomfort — parallax, scroll-driven scaling, large travel — while keeping state changes legible. That means designing the still version deliberately, not deriving it by setting every duration to zero.

### Which CSS properties are safe to animate?

Transform and opacity, almost exclusively — they can be handed to the compositor, so they hold frame rate on hardware you do not control. Animating width, height, top or left forces layout every frame, which is where scroll-linked effects start to stutter.

### How do you make an interface feel faster without making it faster?

Land the motion decisively and keep the work legible. A curve with a long dead tail reads as broken even at a short duration, and a named loading step (reading 14 documents) buys far more patience than a spinner.

---
© Lines & Frames — https://www.linesandframes.com