Motion that earns its place

We like motion. We build a lot of it. And we spend an unreasonable amount of time removing it from sites that came to us with too much. Both of those things are true at once, and the reason is that motion is not a decoration you add to a page. It is a sentence the page is speaking, and most pages have nothing to say.

Motion is information

A good animation answers a question the visitor was about to ask. Where did that panel come from? What happens if I press this? Which of these things is connected to that one? When motion answers those questions the interface feels calm, because nothing is surprising. When it does not, the page feels busy no matter how tasteful the easing curve.

The hero that assembles itself as you arrive is telling you the site is alive and considered. The reveal that lifts each section as you scroll is telling you where you are in the story. The image that follows your cursor across a list of projects is telling you which one you are about to open. Each of these has a job. The bounce on the button for no reason does not.

The rules we work to

Nothing moves without a reason we can say out loud. Duration sits between a third of a second and just over one, depending on the size of the thing moving. Easing is always asymmetric, fast out and slow in, because that is how objects move in the world. Motion never blocks the content; if you can read the page before the animation finishes, we have done it correctly.

We also respect the visitor who has asked their device for less motion. Every animation we ship has a reduced motion path, and the page must read perfectly with all of it turned off. If it does not, the animation was carrying structure it should never have been trusted with.

The kinetic, not noisy, test

Our own brand guide has a phrase we use as a filter: kinetic, not noisy. Kinetic means the page has energy and the energy has direction. Noisy means things are moving and nobody knows why. Sit with a page for thirty seconds. If it still feels good, it is kinetic. If you find yourself waiting for it to settle down, it is noise.

Start by removing

If your site feels tired, the instinct is to add movement. Try the opposite first. Strip every animation, then add back only the ones you miss. You will usually miss three or four. Those are the ones that were doing work. Build the rest of the site's motion around them and it will feel more alive with less, which is the whole point.