Broken animations with prefers-reduced-motion

[swissspidy]

Bug Description

Not everyone likes decorative animations or transitions, and some users outright experience motion sickness when faced with parallax scrolling, zooming effects, and so on.

That's why users can express to prefer reduced motion on websites. See https://web.dev/prefers-reduced-motion/.

Unfortunately, our story animations currently break completely in that case, making elements disappear.

There are some ideas to fix this on the format side: ampproject/amphtml#24821

Perhaps we can add some workaround on our end in the meantime?

Expected Behaviour

Elements should still be visible, but not animated

Steps to Reproduce

1. Reduce motion
2. Create a new story with some animated elements
3. Preview story
4. Notice elements are not appearing

To reduce motion:

In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
In macOS: System Preferences > Accessibility > Display > Reduce motion.
In iOS: Settings > General > Accessibility > Reduce Motion.
In Android 9+: Settings > Accessibility > Remove animations.

Screenshots

Editor:

Reduce Motion:

No Reduce Motion:

Additional Context

• Plugin Version: 1.7
• WordPress Version: 5.7
• Operating System: all
• Browser: all

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

[swissspidy]

It seems like it would be possible to extend <CustomCSS> to add each animated element's last keyframe as custom CSS, wrapped in a media query.

For example, the above element with a "Fly In" animation will result in an animation like this:

<amp-story-animation layout="nodisplay" trigger="visibility">
	<script type="application/json">
		[{"selector":"#anim-b8d84c48-f550-4427-bbfb-415f1eaf1cbb","keyframes":{"transform":["translate3d(0px, -292.13304%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]
	</script>
</amp-story-animation>

The expected custom CSS would be:

@media (prefers-reduced-motion: reduce) {
	#anim-b8d84c48-f550-4427-bbfb-415f1eaf1cbb {
		transform: translate3d(0px, 0px, 0);
	}
}

That should make the element re-appear as expected.

There are some concerns due to <CustomCSS> using dangerouslySetInnerHTML, so it's important that the output is safe. Any CSS on the frontend will be sanitized by the built-in PHP-CSS-Parser though, so this could be neglected a bit.

[swissspidy]

Two alternatives to the above:

1. Since media queries don't work in inline styles, move the initialStylesFromKeyframes/getInitialStyleFromKeyframes() CSS to CustomCSS and wrap it in @media not (prefers-reduced-motion) {} instead. Example:

   @media not (prefers-reduced-motion) {
     transform: translate3d(0px, -292.13304%, 0);
   }

2. A variation of the above, set a custom property on the element's inline style, e.g. --ws-initial-transform: translate3d(0px, -292.13304%, 0); and have some general CSS in CustomCSS that basically does:

   @media not (prefers-reduced-motion) {
     [id^=anim] {
       transform: var(--ws-initial-transform)
     }
   }

   The advantage of this being not requiring any specific sanitization in CustomCSS

[csossi]

Verified in QA