search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.64k stars 165 forks source link

Support for prefers-reduced-motion #178

Open qinyiyao opened 3 years ago

qinyiyao commented 3 years ago

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 commented 3 years ago

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?