Twenty Twenty: Consider less aggressive motion preference styles

[sabernhardt]

Twenty Twenty styles create animations and transitions but then disable all that animation for people who set the reduced motion preference in their browser/OS.

@media ( prefers-reduced-motion: reduce ) {

	* {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}

The theme needs to continue honoring the preference, but it could define each of its animations within a (prefers-reduced-motion: no-preference) media query—and remove the 0s !important styles—instead. That way, the theme would be responsible for its own motion without disabling motion from other stylesheets (from plugins).

Related: #54174 (Twenty Twenty-One)

[parinpanjari]

This feature is implemented as a media query, it can be accessed the same way we access any media query values in JS: using window.matchMedia.

function getPrefersReducedMotion() {

const QUERY = '(prefers-reduced-motion: no-preference)';
const mediaQueryList = window.matchMedia(QUERY);
const prefersReducedMotion = !mediaQueryList.matches;
return prefersReducedMotion;

}

[sabernhardt]

Reversing the logic for Twenty Twenty's motion styles would not be as easy as it had been for Twenty Twenty-One. With no activity in two years, it probably is time to close the ticket.

[karmatosed]

Thank you everyone. Closing as recommended.