[Feature Request] Prefers Reduced Motion

[goatandsheep]

We should be inclusive to those who prefer reduced motion, including those who are prone to motion sickness or are epileptic by adding CSS classes to reduce animations where there is a prefers-reduced-motion media query. The article uses the following code snippet as an example of how it could look:

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

[bodymovin]

Hi, I think is a great idea. But it seems this should be handled by the developer and not the library.
Each case might need a different solution. You can replace the animation with a static image, stop the animation in the first frame, in the last one, or other options.
What do you think?

[goatandsheep]

That's a good point! I'm just trying to think about a way to push users of lottie to make accessible animations. Perhaps setting it to none by default, but having a flag that allows those who want to customize the behavior to turn it off.

I haven't used lottie extensively, but one of my work projects does extensively and we are doing an accessibility audit. After looking through the library a bit, I've noticed that the animations are Javascript-based vs CSS-based, so perhaps the default could be set depending on the following media query: window.matchMedia('(prefers-reduced-motion: reduce)').

[goatandsheep]

Is there a way to simply pause on the first frame?

[bodymovin]

you can set autoplay: false to render only the first frame

[goatandsheep]

I did some more research into the topic and what I've learned is that as you mentioned there are many other ways of dealing with reduce:motion:

• keep most animations under 5 seconds
• for looping animations, they shouldn't take a huge amount of room on the page
• make sure people can easily skip or move away from a page with animations if they need to

[tomasdev]

Is there an autoplay: false equivalent for showing the last frame of a lottie animation?

[bodymovin]

@tomasdev perhaps this can help
https://github.com/airbnb/lottie-web/wiki/loadAnimation-options#initialsegment

[tomasdev]

Ended up using goToAndPlay(lastFrame, true)