Add support for a reduced motion prop

[Sandstedt]

To make animations accessible per default, maybe we should add a reduced motion media query test before playing any animation. Then via a prop you could disable this, so it always plays. This could be fine for smaller animations and animations with just opacity or color changes.

So it would be up to the developer to decide if the animation is safe.

[xavierfoucrier]

Hi @Sandstedt!

Can you give a short code sample to figure out what you mean? 😉

[Sandstedt]

Here's and article about what it is and when it should be used: https://developers.google.com/web/updates/2019/03/prefers-reduced-motion

const opacityAnim = new mojs.Shape({
  opacity: {0 : 1},
  a11y: false
});

Not sure about the prop name. Should be clear that it has with accesability to do and that we want to ignore the prefere reduced motion check.

[Sandstedt]

So if the a11y prop in the example above is set to true, the animation wont play if the user has set "Prefere reduced motion" in their system settings.

[xavierfoucrier]

Thanks for the clarification, it could be a great feature: respect the user preference is more important than ever today.

[Sandstedt]

Yeah, it very easy to do self as a developer, by adding the stop method inside the media query. But then the developer need to be aware of it. Better to have them opt-out instead if they know what they're doing.