Reduced Motion Explained: Make Website Animation More Comfortable
Does your website respect a reduced-motion preference? Some visitors need less movement to use a page comfortably.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: Start with the visitor setting
Devices can expose a preference for reduced interface motion.
On-screen labels: Device setting; Browser preference; Visitor choice.
-
Step 2: Review non-essential movement
Large slides, zooms and parallax effects deserve attention.
On-screen labels: Large movement; Zoom effects; Parallax scrolling.
-
Step 3: Provide a calmer presentation
A reduced-motion style can simplify or remove suitable animation.
On-screen labels: Static alternative; Simpler transition; Same information.
-
Step 4: Keep important feedback clear
A calmer interface still needs to show the result of an action.
On-screen labels: Visible status; Clear state change; Useful feedback.
-
Step 5: Review third-party components
Embedded players and widgets may have their own behaviour.
On-screen labels: Embedded content; Widget settings; Actual page test.
-
Step 6: Test with the setting enabled
Check navigation and essential tasks in the reduced-motion mode.
On-screen labels: Preference enabled; Working controls; Comfortable presentation.
A practical check for your business
Enable the device's reduced-motion preference and follow an important page journey. Confirm that necessary information remains available and that motion does not become the only way to understand a result.
Sources and further detail
Common questions
Does your website respect a reduced-motion preference?
Some visitors need less movement to use a page comfortably. Use movement carefully and keep controls usable.
Go further
More video tips
All 205 videos →
Browser Zoom: 6 Checks for a More Readable Website
Check the enlarged page.
Mobile Website Menus: 6 Practical Navigation Checks
Check the small-screen route.