Re: [css-animations] prefers-reduced-motion meaning vis-a-vis scroll-triggered animation

[I realized I sent my response only to Charles; re-sending to the mailing
list]

Hi Charles,

> The terminology for the user preference which triggers
prefers-reduced-motion: reduce is not consistent across operating systems.
> In MacOS and iOS the preference reads "Reduce motion" (implies not all
animations)
> In Windows 10 the preference reads "Show animation in Windows" (implies
all animations)

This is true. We have been looking at implementing this in Chromium and are
aware of the inconsistency. [1], [2] have more detail around our attempt to
map the underlying platform preferences into prefers-reduced-motion MQ.
In particular we are looking closely at how those preferences are used on
each platform and how other browsers have chosen to interpret them. Feel
free to leave a comment there if you have feedback here.

> Interpreting what is a subtle animation may vary from one person to
another.. I'd rather do without any animations rather than have you guess
wrong. If I tell the operating system that I don't want animations, then I
don't want animations, without having to judge each animation.

I like to make a distinction between two sets of animations:
A) Content animations: Animations the belong to page content that are
authored using css animations, css transitions, web-animations (time-based
or scroll-based), windows.requestAnimationFrame
B) Browser animations: Animations related to the browser UI e.g., menu
animations, page transitions, tab minimize/close, smooth scroll animations

prefers-reduced-motion MQ applies to (A) and provides a hint to web pages
that the user prefers reduced motion. It is up to the web developer to
actually use that to turn of any animations the consider matching the
criteria here. In particular the user agents *do not* automatically disable
any such content animations even if the preference is set. Changing this
behavior is a major change to how this property works with implementation
and compatibility implications for all web animations. Such a proposal
needs to be debated more broadly. I think opening an issue against
web-animations specification [3] is a good starting point.

For (B), the user agent is in charge of these animations and it can and
should take the platform provided animation preference into consideration.
But this is not really a CSSWG concern.

> Specifically with regard to scrolling, any animation of scrolling or
triggered by scrolling, however small or brief, risks my eyes feeling
queasy or me being distracted or both. I need to be able to disable it
completely.

scroll-linked animations as in [3] fall squarely in (A) and my previous
comment applies. The existing MQ is only a hint to web pages and it is up
to them to disable this animations.
Other existing scroll related animations such as "smooth scroll" animations
fall into (B) and browsers can apply the platform's animation preference.

Aside: Note that being scroll-linked does not necessarily mean that the
animation causes motion for example it can be an opacity or color
animation. Also a motion inducing animation can be either time or scroll
based. In another word, inducing motion is more attributed to the output of
the animation as opposed to it input (time, scroll). This is the key point
behind my comment in the F2F meeting where I suggested this is a general
problem that should be considered for all content animations and not just
scroll-linked animations.

Best regards,
Majid

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=722548#c23
[2]
https://docs.google.com/document/d/1aZnSfg7I-xbRBYui5jkUIdbIgZ5jK9u-CUplPFU_tC8/view#heading=h.o3c9652cxb88
[3] https://drafts.csswg.org/web-animations-1/
[4] https://wicg.github.io/scroll-animations/



On Wed, Nov 14, 2018 at 11:00 PM Belov, Charles <Charles.Belov@sfmta.com>
wrote:

> In regard to [CSSWG] Minutes Lyon F2F 2018-10-22 Part V: Scroll Linked
> Animations,  CSS UI, Review HTML fieldset/legend spec [CSS-UI]
>
>
> With regard to Scroll Linked Animations:
>
>
>   "jensimmons: It would be great if there was a way the spec mandated
>
>               that websites obey the user's prefers-reduced-motion
>
>               setting. If devs (or their bosses) wants to override the
>
>               user's preference, they can't.
>
>   majidvp: If we want to do that, it's better suited to web
>
>            animations. Here, we're just adding a new timeline. The
>
>            timing model lives inside web animations.
>
>   florian: prefers-reduced-motion is not prefers-no-motion. Subtle
>
>            animations should be able to remain. Turning everything off
>
>            is too big of a hammer
>
>   jensimmons: I don't know about the details. Let's not bikeshed right
>
>               now. CSSWG needs to enforce prefers-reduced-motion in
>               any way we can"
>
> Response:
>
> The terminology for the user preference which triggers
> prefers-reduced-motion: reduce is not consistent across operating systems.
>
> In MacOS and iOS the preference reads "Reduce motion" (implies not all
> animations)
> In Windows 10 the preference reads "Show animation in Windows" (implies
> all animations)
>
> I'm guessing you want to make a single decision which applies across
> platforms.
>
> Interpreting what is a subtle animation may vary from one person to
> another.. I'd rather do without any animations rather than have you guess
> wrong. If I tell the operating system that I don't want animations, then I
> don't want animations, without having to judge each animation.
>
> Specifically with regard to scrolling, any animation of scrolling or
> triggered by scrolling, however small or brief, risks my eyes feeling
> queasy or me being distracted or both. I need to be able to disable it
> completely.
>
> That said, I would expect a page which informs me that an animation is
> available and for which I click a Play button would play the animation, as
> for an instructional animation demonstrating a specific procedure. But that
> is outside the topic of scroll-triggered animation.
> --
> Hope this helps.
> Charles Belov
> Uses pronouns: he, him, his, himself
> Webmaster
> Communications and Marketing
>
> [Macintosh HD:Users:leonyu:Documents:LEON_SFMTA:SFMTA Rebrand:Digital
> Brand Assets:Email Signature:SFMTA18-Logo-Horz-PMS.png]
>
> Charles.Belov@SFMTA.com
> Office 415.646.2061 (note new number)
>
> San Francisco Municipal Transportation Agency
> 1 South Van Ness Avenue, 3rd floor
> San Francisco, CA 94103
> [Macintosh HD:Users:leonyu:Documents:LEON_SFMTA:SFMTA Rebrand:Digital
> Brand Assets:Email Signature:SFMTA_Insta.png]<
> https://www.instagram.com/sfmtaphoto/>[Macintosh
> HD:Users:leonyu:Documents:LEON_SFMTA:SFMTA Rebrand:Digital Brand
> Assets:Email Signature:SFMTA_FB.png]<https://www.facebook.com/SFMTA.Muni/>[Macintosh
> HD:Users:leonyu:Documents:LEON_SFMTA:SFMTA Rebrand:Digital Brand
> Assets:Email Signature:SFMTA_Twtr.png]<https://twitter.com/sfmta_muni
> >[cid:image008.png@01D3E20E.7B464A60]<https://www.sfmta.com/>
>
>
>