Support `prefers-reduced-motion` media query

[danrichman]

When clicking left/right paddles, the current implementation is too fast for those with motion-triggered vestibular spectrum disorder. Some users will likely experience distraction or nausea from the animation. flickity should attempt to support the prefers-reduced-motion media query.

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

@media (prefers-reduced-motion: reduce) {
  // Override CSS-based animations
}

Source: https://developers.google.com/web/updates/2019/03/prefers-reduced-motion

Alternate approaches: • Slow down animations considerably. • Fade in/out into the next shelf pagination, instead of smoothScroll.

[desandro]

Add a 👍 reaction to this issue if you would like to see Flickity support prefers-reduced-motion

---

In the meantime, you add your own custom navigation buttons that trigger next, previous, and select instantly with no animation.

Or you can use flickity-fade for fading between slides instead of motion.

[ChasBelov]

Confirmed the behavior makes me feel ill, probably not a sensation sites using this code want associated with their brand. I have prefers-reduced-motion set. Fade doesn't make me feel ill but it can be distracting; I'd prefer no cosmetic animation.