Description

When a story is viewed with a prefer-reduced-motion device, the amp-story-animation animations are not triggered. In many cases, these animations are used to introduce elements into the view. Since the animations don't run, the animated elements don't show up on the story at all.

Eg:

<amp-story-animation trigger="visibility">
[{
"selector": ".anim",
"keyframes": {
   "transform": ["translate3d(-100%, 0px, 0)", "translate3d(0px, 0px, 0)"]
}}]
<amp-story-animation>
...
<div class="anim" style="transform: translate3d(-100%, 0px 0)">Animated element</div>

Reproduction Steps

1. Activate reduced motion in your OS
2. Go to https://slashedbeauty.com/web-stories/easy-eyeshadow-for-beginners/
3. Animations will not play, but the animated elements are not in the page.

What should happen: Animations don't play, but animated elements should show in their final state.

Browser(s) Affected

All

AMP Version Affected

latest