Support for prefers-reduced-motion

[qinyiyao]

The problem

The zoom animation is a big object quickly enlarging and moving on the screen; this may cause a problem for certain users.

https://css-tricks.com/introduction-reduced-motion-media-query/

Solution

Conditionally set the transition-duration to 0ms when prefers-reduced-motion media query is reduce.

Implementation

An immediate solution is to force a 1ms onto the class. For some reason, 0ms will not work: it can zoom in, but will not zoom out.

@media (prefers-reduced-motion: reduce) {
    .medium-zoom-image {
      transition-duration: 1ms !important;
    }
  }

(Tested with gatsby-remark-images-medium-zoom )

[francoischalifour]

Thanks for the feature request!

Providing 0ms doesn't work because the library code relies on the transitionend event to clean up after zooming out.

Do you mind sending a PR?