Motion with a reason.
Scroll-driven motion can make a site impossible to forget — or impossible to use. The difference is whether each movement has a job.
Motion is how a site gets remembered. It’s the part people describe to someone else, unprompted — what happened when they scrolled — and that’s the part worth designing for. It is also where ambitious sites most often go wrong.
Three jobs
We don’t add motion to a page. We give it work to do, and where there’s no work, there’s no motion.
- Direct the eye. One thing moves at a time, and it’s the thing to look at next.
- Explain. Order and cause are easier to show than to tell: a line that draws itself down a process as you read it, a mark that turns as it travels to where it belongs.
- Answer. A hover, a press, a scroll: each gets a response within a frame, so the page feels like it’s paying attention.
What it must never cost
Speed. A browser can move some things cheaply — position, scale, opacity — and everything else only by working out the page again. We animate the cheap ones, and stop animating whatever is off the screen.
Reading. Text doesn’t move while it’s being read. It arrives, then it stays.
Choice. Motion on screens makes some people unwell, and their devices say so: operating systems have a setting to reduce motion, and the web’s accessibility guidelines ask that motion triggered by interaction can be switched off. The pages we build honour it. Turn it on, and the page is still there, whole — only still.
Every sequence starts and ends on a composition that would hold as a photograph.
The first frame is a still
In the first half second, that’s exactly what a page is: a still, judged before anything has had time to move. Motion has to earn its place after that — by being worth the scroll.
