← Back to Journal

Motion that respects the person reading

Scroll animation earns its place when it survives reduced-motion settings, keyboard focus and a slow connection. A short checklist.

An abstract mark for accessible motion design

Motion is the fastest way to make a site feel considered, and the fastest way to make it feel hostile. The difference is rarely taste. It is whether the animation was built with an exit.

Start from the reduced-motion case

Design the page as it behaves when someone has asked their operating system for less motion, then add movement on top. Built the other way round, the reduced-motion version is whatever is left after the effects are stripped out, which is usually a page with content that never becomes visible.

Never gate content on an animation

If text only appears once an element has scrolled into view, then anything that interrupts the script leaves that text invisible. A slow connection, a blocked file, an unusual scroll container. Content should be present by default and revealed as an enhancement.

Keyboard focus outranks the effect

Tabbing through a page moves focus to elements that may be off screen or mid-transition. If focus lands somewhere the reader cannot see, the animation has broken navigation. Test the whole page with the keyboard before calling the motion done.

Respect the second visit

An entrance animation that delights on the first load becomes a toll on the fifth. Keep them short, and consider skipping them entirely for returning visitors.

/ BOOK A CALL

Let's get your next page
out this week.

A halftone hand holding a crumpled paper sheet painted with an orange arrow pointing up and to the right, on a black ground

Some months need more than the block of hours covers. The same team scales up for a launch, a rebrand or a migration, without a new onboarding.

Book a free discovery call