Respect “reduce motion” settings

Visitors who asked their device to reduce motion get no smooth scrolling, animations or transitions on your site.

Type CSS (CSS)
Runs Public site, in the page head
Category Design
Tested with WordPress 7.1

CSS

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

In these packs

Design touches: Small front-end touches: a reading progress bar, an announcement bar, a WhatsApp button, accessibility fixes.

Install it in one click

It's already in the Snipfire plugin's library. Enter your site's address and it opens there, ready to install. It arrives switched off, and Snipfire checks the code and test-loads your site before you switch it on.

Needs Snipfire on that site and you logged in as an administrator. Your address stays in this browser; we don't see it. Get Snipfire free

Or add it by hand

Click + New and choose CSS.
Paste the code and give it a name.
Where: Public site, in the page head.
Save and switch it on.

Works in any snippet plugin, or a child theme's functions.php. Without the safety net, though.

In these packs

More Design snippets

Move your snippets over this afternoon.