Make WordPress Core

Opened 2 years ago

Closed 4 weeks ago

#54852 closed enhancement (wontfix)

Twenty Twenty: Consider less aggressive motion preference styles

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


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
2 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 2 years ago by parinpanjari (previous) (diff)

#2 @sabernhardt
5 weeks 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
4 weeks ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Thank you everyone. Closing as recommended.

Note: See TracTickets for help on using tickets.