Aos: Support for prefers-reduced-motion media query

[VeronikaMilic]

This is:

• Feature request

Detailed Description

It would be nice if the library could handle the prefers-reduced-motion media query, to be more accessible (for more info about the problem, there is a nice article on A list apart).

Possible Solution

A possible solution could be to introduce an option to disable animations and just show static images when a user has enabled the reduced motion flag in the browser.

[VeronikaMilic]

So, I came up with a solution to this using disabled and a media query. I'm leaving the line to add to the init() for future reference:

disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches

[AllienWorks]

Very nice, I was looking for exactly that.

@michalsnik I'd consider this (or something like it) for the official release!

[UnionDesign]

I wanted to use the disable parameter for mobile so I did a simple CSS solution which seems to work:

@media screen and (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; } }

[UnionDesign]

Another option might be to simply wrap your AOS SASS @imports with @media screen and (prefers-reduced-motion: no-preference) so that CSS will only be used when someone has NOT stated a preference for motion reduction (so we can assume they won't mind it)