Build Notes: Scroll Animation That Respects Reduced Motion

Scroll animation should respect prefers-reduced-motion by offering a clear, usable layout without decorative movement. Build that layout first, then add motion for people who have not requested less. Text, navigation, project details, and forms must remain available when animation never starts or is switched off while the page is open.

Motion can explain a connection between elements. It can also make a page harder to use. A visitor who has asked their device for less movement should not have to fight through a pinned sequence to reach the contact button.

What does the reduced-motion preference mean?

The browser can detect an operating-system request to reduce non-essential motion. MDN’s reduced-motion reference explains the media feature and the reduce value. The setting is a preference the site should respond to, not a complete accessibility test or a universal request to remove every visual change.

Distinguish ordinary scrolling from extra movement attached to it. Moving new content into view is necessary to read a long page. Rotating the page, zooming a large image, or moving the background at another speed is an additional effect.

W3C’s explanation of animation from interactions describes disabling non-essential interaction-triggered motion and the discomfort it can cause. The criterion is at level AAA. Supporting the preference does not, by itself, establish that an entire site meets a WCAG conformance level.

Make the still layout the complete version

A still layout should present the same information and controls in a normal reading order. All service descriptions need to be available without scrubbing a scroll position. Project details must open without relying on a transition finishing. A form cannot wait for a decorative reveal before becoming usable.

Start by deciding what each effect communicates. If a card expands to show its detail, the still version can open that detail directly. If cards separate to explain a process, the still version can show the ordered steps together with their labels.

Check the page without animation scripts as well. Content that is permanently hidden by its initial CSS is a failure of the base layout. Enhancement should add presentation to content that already works, rather than make the content dependent on an animation engine.

Which effects should change or stop?

Prioritise large transforms, repeated movement, and effects driven by every cursor or scroll update. A decorative field can become a still image or be omitted. A progress indicator can update its state directly. Loading and validation feedback still need to be visible, but they do not need a spinning or shaking treatment.

Use the effect’s purpose to choose the fallback:

Moving treatment	Useful reduced-motion fallback
Pinned service sequence	Services in ordinary document order
Project zoom and rotation	Direct opening with a stable image
Cursor trail	Standard pointer or a still pointer mark
Parallax background	Fixed visual position within the section
Animated progress line	Current step shown without travel

Avoid substituting a different large animation just because it is slower. A slow zoom can still be unwanted movement. The reader’s control matters more than the duration.

Handle CSS and JavaScript together

CSS can disable a transition, but it cannot automatically dismantle a script’s scroll listeners, pinned spacers, or animation loop. The script should check the preference before starting its effects and provide cleanup when the preference changes. Restore styles and layout as well as stopping motion.

This simplified CSS illustrates a still fallback for one service stage:

@media (prefers-reduced-motion: reduce) {
  .service-stage {
    position: static;
    min-height: auto;
    transform: none;
  }

  .service-stage__card {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

The class names are illustrative, not a drop-in patch for every page. The JavaScript layer needs a matching teardown path. Test that removing a pin does not leave a blank spacer or shift keyboard focus to an element outside the viewport.

A hypothetical services-page fallback

Suppose a services section normally gathers several cards into a stack, rotates the active card, and fills the screen as the visitor scrolls. The reduced-motion version presents a list of those services, each with its image, description, and link. No service is hidden behind the stack.

The visitor still gets the distinction between websites, automations, assistants, and software. They can compare the descriptions without repeatedly reversing scroll direction. An active state can use a border or label instead of making a card travel across the page.

Now switch the device preference while the animated section is open. The page should leave the effect, restore ordinary scrolling, and keep the visitor near the content they were reading. Returning them to the top would remove motion but still disrupt the task. This is a hypothetical design check, not a measured result.

Test tasks rather than only screenshots

Check the page with motion enabled and reduced, then perform the same tasks in each mode. Open the navigation, follow a project link, read a service description, and complete the form’s validation path. A still screenshot cannot reveal a trapped scroll area or a broken close button.

Use this review list:

• Switch the preference before loading and while the page is open.
• Tab through controls and confirm a visible focus state.
• Open and close overlays without losing the pointer or focus.
• Read content that normally arrives through a scroll reveal.
• Check small screens for clipped text and leftover pin spacing.
• Confirm decorative loops stop rather than merely become transparent.

Capture both layouts as evidence, then inspect their behavior. Include the fallback in the handover material so later design changes preserve it.

Frequently asked questions

Does reduced motion mean the site must look plain?

No. Typography, images, colour, spacing, and clear state changes can carry the design. Keep the same content and identity while removing movement that the visitor has asked to reduce.

Is a CSS media query enough?

Only for effects controlled entirely by CSS. JavaScript animations also need a preference check and cleanup so loops, listeners, pinning, and inline styles do not keep running or obstruct the still layout.

Should smooth scrolling be disabled too?

Use direct scrolling for the reduced-motion version when smooth travel is decorative. A section link should still reach the correct heading with appropriate space for any fixed header.

Can a screenshot prove reduced motion works?

No. A screenshot shows appearance, not scroll behavior, focus order, or whether an animation loop has stopped. Test the same reading and navigation tasks in both preference modes.

Judge an effect by whether it helps someone use the page. If the still version loses information, revise the design before adding more motion. If the underlying problem is elsewhere, a website rebuild may not be the next move.