Add case for prefer-reduce-motion

[jyggiz]

I think it might be worth adding support for the prefer-reduce-motion media expression to disable animations if the user prefers not to see animations. We can add the preferReduceMotion property inside the second argument:

useTransitionController(refs.self, {
  registerTransitionController: true, 
  setupTransitionInTimeline: (timeline, elements, transitionContext) => {
     // Add your in timeline here.
   },
   setupTransitionOutTimeline: (timeline, elements, transitionContext) => {
      // Add your out timeline here. 
   },
   // Default value always is true
   preferReduceMotion: true   
}); 

What do you think about this implementation? I thought it would be nice to have support for such a feature in order to improve accessibility. I can create a PR for this.

[larsvanbraam]

I think this is a very good idea! 👍

But maybe change the default value of the preferReducedMotion to the window.matchMedia('(prefers-reduced-motion: reduce)').matches so it automatically picks up the user's preference.

Also, we should properly test this because disabling animations might break some event callbacks!

[jyggiz]

I love the idea of ​​using window.matchMedia('(prefers-reduced-motion: reduce)').matches! I will start working on PR today!

[pigeonfresh]

In some cases the transitionController is used for essential transitions (opening a menu e.g.) If we want to use transition controller for these types of animations we could perhaps opt for an alternative timeline. setupReducedTimelineIn or something like that

[ReneDrie]

In some cases the transitionController is used for essential transitions (opening a menu e.g.) If we want to use transition controller for these types of animations we could perhaps opt for an alternative timeline. setupReducedTimelineIn or something like that

I don't think this is needed, if you just set the preferReduceMotion option to false it should skip the prefers-reduced-motion check.