Use motion with restraint

Ask an agent to add some animation and it'll fade in every section as you scroll. Ask what each movement is for, and most of it disappears.

Start with the resting frame: what the page looks like when nothing moves. It's what people look at most, what a screenshot captures, and what someone gets when the script fails or reduced motion is on. The common failure is content kept invisible until a script fades it in. When the script doesn't run, the content isn't there.

Here's the bakery's order page with the motion an agent adds when you ask for animation. The photo drifts as you scroll, and the order button bounces. Now motion that explains something. Tap plus, and the new number slides in, so you see what changed. When the Seeded rye runs low, its few left badge fades in, so you notice. That's the sort to make. Decoration moves because it can. Explanation shows a change the visitor needs to follow. Keep the second pile, and cut most of the first.

When you're not sure, ask four questions. What changes here that the visitor needs to follow? Would anyone miss it if it went? Does it make anyone wait? And does the page still work with it switched off? A move that fails the last one isn't finished.

Reduced motion matters for a specific reason. MDN notes that scaling or panning large objects can trigger discomfort for people with vestibular motion disorders. They can switch on a reduce motion setting in their system's accessibility settings, and your page can read it with a media query called prefers-reduced-motion.

Reduced doesn't have to mean none. Here's the quantity change at full motion: the new number slides down into place and fades up. With reduced motion on, the slide goes and the fade stays, so the visitor still sees the number change. The parallax and the bounce simply switch off. Write the reduced version at the same time as the full one.

Write each movement down before anyone builds it. One row per element: what triggers it, what it explains, the motion in numbers, the reduced version, and what happens if the script never runs. Add a never line for the moves you've ruled out. An agent given this builds one transition. An agent told to make it feel alive builds twenty.

Then test it three ways. Switch on reduced motion in your own system settings and use the page. Turn JavaScript off and reload: everything that was waiting to fade in should still be there. Then scroll fast and take a screenshot halfway down. Text caught half-transparent is what a fast scroller sees.

Design the page still, and make sure it works that way. Then add only the motion that explains something, and give each move its reduced-motion version from the start.