Open stubbornella opened 2 years ago
Thank you for opening this issue. Writing as an individual who is impacted by unsolicited animation from vestibular disorder, attention deficit and hyper-vigilance, I would welcome a force-reduced-motion feature. I would prefer the Stepping between key points of animation over Not running animations, as I do not want to lose content, only the animation.
Pain points for me over and above the ones already identified are:
I'm wondering if we should handle this at a more granular level, rather than page-wide.
E.g. startViewTransition() might be defined turn off the transitional rendering and just create an instant view change when a user has prefers-reduced-motion
(https://github.com/WICG/view-transitions/issues/19#issuecomment-1226141044), but have an optional argument that allows overriding that auto-shutoff. That way the author can override one particular transition, without opting the whole page into “I have adapted appropriately let me do anything I want” mode.
We could consider this type of override for other types of transitions and animations also. Then for each individual effect, the author can opt to keep the motion, or let it get shut off by the UA, or change out and simplify the motion based on a prefers-reduced-motion
MQ.
See also discussion in https://github.com/WICG/view-transitions/issues/19
The CSS Working Group just discussed No-motion / forced-reduced-motion issue draft
, and agreed to the following:
RESOLVED: Adopt the general path forward of allowing more granular animation control, Rob will write proposed explainer for it
See Official Minutes
Was there discussion of a new forced
value on the existing prefers-reduced-motion
media feature? If for no other reason, it would keep the Boolean match working.
At the time of that media feature proposal, we discussed other future granular values, including forced values.
@cookiecrook I'm not sure it was explicit, but I was assuming that we'd add such a value, yes.
Asking because the minutes aren’t clear on how a “new property” would interact with the the existing MF.
For example, if the UA disabled image based animations (e.g. GIFs), or dropped all interstitial key frames in CSS animations/transitions, would the property affect all of the above? Why should an author be able to override a user safety feature?
Related: https://webkit.org/b/248020
@cookiecrook Thanks for bringing that point up.l The author shouldn't be able to override a user safety feature.
As a vestibular sufferer & researcher, the best solution is snapping to the finished state with no transition or keyframes.
@nattarnoff wrote:
The author shouldn't be able to override a user safety feature.
I agree.
the best solution is snapping to the finished state with no transition or keyframes.
I'm not convinced of this statement re: "best solution" to fit all needs, though that'd certainly be a reasonable implementation, and if the user desires transition snapping, great.
A detail you may not be considering is that many humans will miss single frame transitions. I notice this whenever I'm subjected to bullet point slide decks; often I blink and don't immediately realize we're on a new slide.
Another implementation that may be able to achieve the same benefit (no vestibular discomfort) while still getting the user to acknowledge meaningful transitions could be to compute a non-moving dissolve transition between the starting state and ending state.
Effectively a dissolve (aka cross-fade) where previously there had been a zoom or pan that could be a vestibular trigger.
@cookiecrook In this case "best solution" is based on not having the granular control in prefers-reduce-motion. If we had to make a call on what prefers-reduce-motion does in these cases, it is better to account for the edge scenarios knowing that will work for those less severe. But we don't have to be so strict. The key is to make the transition feel instant for those who have motion based issues. So instead of a 5 second transition, we do something below half a second. Anything that can happen in under 100ms will feel instantaneous and most likely not affect most motion sensitive users.
The syntax of prefers-reduce-motion was designed to allow more granular control if needed... Future values could be added... Cite: stop-all
value in https://github.com/w3c/csswg-drafts/issues/5594#issuecomment-724308217 or forced-no-motion
value in https://github.com/w3c/csswg-drafts/issues/442#issuecomment-265206909
So it still matches the boolean context, but in this case, the implementation can change what's rendered/animated instead of leaving it up to the author. (Note: the "implementation can change what's rendered/animated" is still a hard problem IMO.)
Mac's "reduce motion" is analogous to its "increase contrast" in that it's adjusted, but not to extremes… Where Windows' "Stop Animations" pref could be more analogous to its [forced and often extreme] "high contrast" settings.
For the prefers-contrast
media feature, we changed it to prefers-contrast: more;
to account for variance, and future potential values like high
which do not match the Mac implementation but could someday. The more
value or boolean @media (prefers-contrast)
would both evaluate to true for the Window's high
contrast.
I think something similar could be done for any forced motion changes.
https://www.w3.org/TR/adapt-content/ provides levels of importance in animation
I'm sorry, I must be missing it. Can you clarify which part of the document has levels of importance in animation?
I've put together an updated explainer with a possible proposal at: https://github.com/flackr/reduce-motion
After having given this some thought, I'm wondering if we could re-use the existing media query support and automatically annotate animations declared within a reduce motion media query to be supporting of reduced motion. This would reduce the syntactic overhead for authors not having to think about a new property. We would of course still need such a property in the web animations API but it could be a hidden internal value in CSS for both transitions and animations, e.g.
@keyframes pulse {
from { transform: none; }
to { transform: scale(15%); }
}
.attention {
animation: pulse 1s infinite alternate;
}
@media (prefers-reduced-motion) {
@keyframes outline {
from { outline: 2px solid red; }
to { outline: 2px solid orange; }
}
.attention {
/* This animation would be implicitly marked as supporting reduce motion
as it has been specified inside an @media query matching prefers-reduced-motion: reduce */
animation: outline 1s infinite alternate;
}
}
Edit: If we don't want to use the media query implicitly, it would probably need to be a new property for animations and transitions - e.g. animation-motion
/ transition-motion
with values normal | reduced
to reflect whether the animation defined supports reduced motion. It feels a bit redundant to have to specify this when you're in a media query block for reduced motion but could be flagged by developer tooling.
When we forcibly reduce motion (for those normal animations) I think we should do so by disabling smooth interpolation rather than completely removing animations, as their animated values may be critical to the usability of the page.
The CSS Working Group just discussed No-motion / forced-reduced-motion issue draft
.
CSSWG explored the idea of allowing authors to tag animation keyframe sets for reduced motion (see minutes above), so that the UA can know the best way to adjust that particular frame set. Options could some of the explorations @flackr has been doing, e.g.
Authors could use the media query to make additional adjustments to animations, but this would allow simple adjustments to be made in the keyframe set so that whenever it is referenced it will have the adjustments built in.
Thinking about it some more, being able to substitute the easing curve (without rewriting all the frames) might also be a useful ability.
... And also, when this spec is drafted up, we should include a lot of really good examples of different use cases and show appropriate adjustments for each, so that developers can understand how to use them. And/or publish a separate NOTE that walks through examples and shows best practices together with their code and rendering, which can be easily referenced from reference documentation such as MDN.
Reminder that it's not just VIMS but also hyper-vigilance. Any animation disrupts my train of thought, not just potentially makes me ill.
Ideally, the user agent would allow the website visitor to choose the animation remediation method that they prefer rather than the browser manufacturer making the decision for them:
A potential issue with step through key frames would be that a website developer can specify an arbitrarily large number of key frames.
With regard to don't change the animation, this one is important, I still don't want it automatically playing. I specifically want to click a play button. Automatically playing animations are disruptive to me.
I read the log and, as mentioned, different people have different sensitivities. Unlike a couple folks quoted in the log, I am very much triggered by scroll-based animation and it will cause me to leave a website.
One thing that was not mentioned and maybe even need to be a different Github issue is a matter of background animations, which generally occur in the form of a video. Again, these cause me to need to leave a website.
The TAG review of scroll linked animations identified an existing issue that without explicit developer support, animations with motion on the web do not respect a user's desire to reduce motion. We explored many options for reducing motion but found that it was not possible to automatically reduce motion without sometimes making content invisible. We still feel it is worthwhile exploring whether we can forcibly reduce or remove motion with a new user setting. From our demo we came up with at least two feasible options to force motion reduction, though we are open to exploring others:
We propose adding a new setting for users to elect to forcibly reduce motion, possibly breaking content in the same way that other existing settings such as disabling images or Javascript does and exposing a media query value for when this setting is on so that developers can provide a fallback variant.