Context Navigation

← Previous Ticket
Next Ticket →

#54852 closed enhancement (wontfix)

Twenty Twenty: Consider less aggressive motion preference styles

Reported by:	sabernhardt	Owned by:
Priority:	normal	Milestone:
Component:	Bundled Theme	Version:
Severity:	normal	Keywords:	needs-patch close 2nd-opinion
Cc:		Focuses:	accessibility, css

Description

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)

Change History (3)

#1 @parinpanjari
4 years ago

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;

}

Last edited 4 years ago by parinpanjari (previous) (diff)

#2 @sabernhardt
2 years ago

Keywords close 2nd-opinion added

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.

#3 @karmatosed
2 years ago

Milestone Future Release
Resolution → wontfix
Status new → closed

Thank you everyone. Closing as recommended.

Note: See TracTickets for help on using tickets.

Download in other formats:

Make WordPress Core