Allow disabling of motion or animation

I have low-motion set on my android device and support for it is let&#x27;s say highly variable<p>I also have <i>no idea</i> why the system bothers with most of the animations -- the material &#x27;hero animation&#x27; where there are two different animations with sequential curves is awful <a href="https:&#x2F;&#x2F;docs.flutter.dev&#x2F;development&#x2F;ui&#x2F;animations&#x2F;hero-animations" rel="nofollow">https:&#x2F;&#x2F;docs.flutter.dev&#x2F;development&#x2F;ui&#x2F;animations&#x2F;hero-anim...</a>. The &#x27;stretch at end of scroll&#x27; feature was making people sick if you believe reddit <a href="https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;GooglePixel&#x2F;comments&#x2F;qcadhq&#x2F;the_overscroll_stretching_in_android_12_is&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;GooglePixel&#x2F;comments&#x2F;qcadhq&#x2F;the_ove...</a><p>These also take upwards of a second, which is a lot of time when I&#x27;m trying to get somewhere. I suspect they&#x27;re being emulated on the CPU on older hardware, contributing to jank and battery issues<p>Some apps respond to low motion mode by replacing smooth motion with high-frequency flicker, which seems like exactly the wrong thing to do. I kind of wonder if this is the OS battling some framework like Lottie<p>Fancy &#x27;different parts of the layout have different scrolling rules&#x27; in e.g. android google maps are <i>deranged</i> and make everything worse<p>Rip it all out and focus your energy on making usable software for people maybe?

I seriously believe this is one of those issues where the browser should enforce the user&#x27;s preference over what websites want. Rather than try and get every site worldwide to implement this consistently, having the browser disable animations based on the OS-wide configuration would be an easy win for everyone.

It&#x27;s a bit crap that this needs conscious work by developers to implement - I feel like with just a little more thought put into the CSS spec itself, that animations could have defaulted to following the user&#x27;s OS settings unless the dev explicitly marked them as necessary.<p>Edit: not meaning to absolve developers of thinking about a11y, or to accuse css spec designers of negligence, just making the point that a system&#x2F;spec that gets devs to do the right thing by default would be a great thing.

From my chrome&#x2F;userContent.css in my Firefox profile directory:<p><pre><code> @namespace url(http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml); *, :before, :after { transition: none !important; animation-delay: 0ms !important; animation-duration: 0ms !important; } </code></pre> toolkit.legacyUserProfileCustomizations.stylesheets must be set to true in about:config for this to work.<p>This gives me the best &quot;reduced motion&quot; of all (zero motion), with no effort required from developers, and unlike the official preference, does not leave me vulnerable to the no-Javascript fingerprinting discussed at <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30237846" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30237846</a> . I haven&#x27;t noticed it breaking anything important. The same can be put in chrome&#x2F;userChrome.css (without the namespace header) to remove the annoying animations from Firefox itself, at the cost of occasionally breaking the tab bar (it can be fixed by dragging a tab to blank space and then immediate closing it).<p>I&#x27;ve never seen a UI animation I thought was necessary.

Also on this topic, please stop letting css&#x2F;viewport dictating weather I see a menu on the left or not.<p>I&#x27;d like to resize my browser window and put it at the side of my screen to use as a reference. Then I usually have to fight with zoom levels to get that menu to disappear!<p>Even Mozilla is an offender with their otherwise splendid MDN: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Document_Object_Model" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Document_Ob...</a>

Why does even the thought of &#x27;disabling&#x27; animations have to be cast in the context of an accessibility issue?<p>What about those of us that see no need of user interface elements that flollop about doing some kind of &#x27;me Me ME!&#x27; dance, when we just want to get things done?<p>I get it, if you&#x27;re building a webpage maybe that&#x27;s your artistic vision, and I&#x27;m specifically railing on OS animations, but the question still stands, &#x27;why does it have to be an accessibility thing&#x27;? How about a plain, flat, respectful &#x27;turn it OFF bc the user just doesn&#x27;t want that&#x27; kind of option?<p>Don&#x27;t care if this shows my age, when I was getting started in this business, there was serious emphasis on giving the user what they wanted. The user was the center of the universe, not &quot;look at my mad skills&quot;. It&#x27;s just disrespectful to tell the user they have an &#x27;accessibility&#x27; issue, just to get things the way they want them.

What I’d like to have: A setting that says I prefer reduced motion. Not &quot;none&quot; motion. Reduced.<p>Recently, I saw some UI component framework with a sortable list. For anyone else, it moved the element from the old to the new position. For me, it just switched them out, which makes for far worse UX in that case.<p>If for some people any motion is bad, then give them a property, or even better, as someone else said, make the browser disable all animations (I do that for gif, webp etc. with a browser extension)<p>All I want is for sites to not waste my time with animations or make things harder to read with those dumb parallax effects (thankfully that fad did not last long). That’s why I have &quot;prefers reduced motion&quot;.<p>I guess it’s a badly named property if everyone treats it like &quot;prefers no motion&quot;.

I don&#x27;t mind animation in general, but I hate smooth scrolling (first thing I disable when installing any browser).<p>There is a trend of adding fake smooth scrolling using js&#x2F;css, unfortunately.

I write native iOS apps.<p>Apple has a lot of accessibility stuff, built-in, and API flags exposed, all over. It has some <i>really</i> comprehensive user-facing accessibility controls.<p>I think I should probably still review the app I&#x27;m working on, just to make sure that I&#x27;m honoring the users&#x27; wishes.

You can disable animations on Android by enabling the developer menu and setting animationScale to 0. The whole OS feels much faster and its the first setting I make on a new phone. Some apps ignore this scale, which is a good opportunity to report it as an accessibility bug.

I hate anything that changes the appearance of a webpage. I want it to be static. No ad. No animations. No flashing. No videos. No sound. Stop with that stuff.

I have a bit of a counter-point: I find things that just suddenly change disorienting. Line jumps, UI elements just appearing - every non-animated change. This doesn&#x27;t happen in the physical world and it startles me for a moment (longer than a transition would have lasted for).

I too find most web animations and motions to be an annoyance. I wonder if more sites will allow users to specify their animation preferences similar to the way many sites allow users to specify their day&#x2F;night preferences.

Does `@media` support negation? Could it be better to do something like this:<p><pre><code> @media (:not(prefers-reduced-motion)) { .animate-me { animation: pulse 400ms infinite; } }</code></pre>

For what it&#x27;s worth there is an add-on <i>for Firefox at least</i> that will disable transitions. [1] I am not sure if this will address all the needs. Maybe just the excessive CSS animations.<p><i>A simple CSS-only addon that globally disables all CSS transitions and animations. This helps websites perform better or feel more responsive when these effects are used excessively.</i><p>[1] - <a href="https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;disable-transitions&#x2F;" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;disable-trans...</a>

Maybe someday e-ink will be sufficiently popular for people to demand UIs that work well with it.<p>The day that happens, I&#x27;ll figure out how to trick apps into thinking they are running on such a display.

I&#x27;m continually surprised that display systems don&#x27;t implement safeguards designed to minimize this sort of thing.<p>It seems like it should be relatively simple to prevent repetitive flashing patterns from ever occurring by tracking the last few seconds of display state and looking for blinking regions of the screen. This would fix the problem for <i>all</i> applications, including blinking caused by something like scrolling too fast through a task switcher.<p>If I were epileptic I would want something like this for my computer as a layer of safety.

&gt; Users that are prone to seizures or motion sickness <i>or who are on a sluggish remote desktop connection</i> may need to disable animation or motion. Add an option for users to disable this.<p>FTFY

Yes, please!<p>And also for the command line. Why there&#x27;s no global option to switch off tqdm and all similar &quot;modern&quot; clutter? Like NO_COLOR but with all terminal animations and stuff.

An example of animation that responds to prefers-reduced-motion is the subtle animation on the Kagi home page:<p><a href="https:&#x2F;&#x2F;kagi.com" rel="nofollow">https:&#x2F;&#x2F;kagi.com</a> (you should see stars and clouds animate, same is used for logged in users on the main search landing page)<p>We have a FAQ entry how to find this setting in different OS so that users can control it:<p><a href="https:&#x2F;&#x2F;kagi.com&#x2F;faq#reduce-motion" rel="nofollow">https:&#x2F;&#x2F;kagi.com&#x2F;faq#reduce-motion</a>

Anyone remember &quot;SuperStop&quot;? Loved that. NoScript does ok, but animated GIF&#x27;s are still a pain.

I think websites where you actually do things, such as retail or text or video based sites should keep animations to the minimum, as a visitor wants static content to examine. In fact only promotional websites should have heavy animations IMO (if they think its nice..).

Also, it would be great if Apple could let us disable the pull to refresh gesture in safari.

And yet Apple introduced Dynamic Island with no way to turn off the constant animations.