Re: [w3ctag/design-reviews] CSS Animation Worklet API (#349)

Thanks for the comment @alice.


> What effect would using a prefers-reduced-motion media query have if authors have used an AnimationWorklet to create a custom animation? Would the animation not run by default? Or would the author need to take some specific action via the matchMedia() function?

I believe `prefers-reduced-motion` in the context of Animation Worklet should behave similar to how it behaves with Web Animations specially given that currently the only channel to use Animation Worklet is through Web Animations API i.e., by creating an animation. So with that in mind, the preference should not turn off the animation by default (since animation may not produce any motion) and it would be up to authors to take the preference into account.

My understanding is that currently the best practice is to have authors use matchMedia to decide when to create an animation or not. For example:

```js
const hasNoMotionPreference = 
           window.matchMedia('(prefers-reduced-motion: no-preference)').matches
if (hasNoMotionPreference) {
  animation = new Animation(keyframesWithMotion).play();
  workletAnimation = new WorkletAnimation('my_animator', keyframesWithMotion).play();
} else {
  animation = new Animation(keyframesWithoutMotion).play();
  workletAnimation = new Animation('my_animator', keyframesWithoutMotion).play();
}
```

This should work the same work for WebAnimations and Animation Worklet.


In cases where the author needs to have their customization behave differently to reduce motion we have a reasonable generic solution that allows the worklet animation to pass additional options to its animator. See the example below:


```js
const  prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
const workletAnimation = new WorkletAnimation(
    'fancy_motion_animator', 
    keyframes, 
    { prefersReducedMotion }
).play()
```

```js 

registerAnimator('fancy_motion_animator', class {
   constructor(options)  {
     this.options = options;
  }
  
  animate(currentTime, effect) {
     if (this.options.prefersReducedMotion) {
        //  reduced motion version, maybe directly go to last frame instead of animating!
        effect.localTime = effect.getTimings().duration;
     } else {
        // regular version.
        effect.localTime = currentTime;
     }
  }
});
``` 


> Might it make sense to make prefers-reduced-motion a first-class API in this context, so that authors might be encouraged provide an alternate version of animations (for example, regular scrolling tends to be acceptable) which may be less problematic for anyone who has the prefers-reduced-motion preference set?

I am not so sure about this. As I mentioned Animation Worklet already provides a generic method that allows authors to send motion preference and customize their animator logic if it is indeed a motion producing animation. I prefer this generic solution over a something custom tailored to this particular preference. 

However I think it is a great idea to highlight reduced motion preference in the specification and explainer examples and show how it can be used. I filed [css-houdini#903](https://github.com/w3c/css-houdini-drafts/issues/903) to address this.






 



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/349#issuecomment-503576179