Live data from Hacker News

Allow disabling of motion or animation

accessibilityfordevelopers.com

101–110 of 132 posts

Re: Allow disabling of motion or animation

#101
post #77
post #16

From my chrome/userContent.css in my Firefox profile directory: @namespace url(http://www.w3.org/1999/xhtml); *, :before, :after { transition: none !important; animation-delay: 0ms !important; animation-duration: 0ms !important; } toolkit.legacyUserProfileCustomizations.stylesheets must be set to true in about:config for this to work. This gives me the best "reduced motion" of all (zero motion), with no effort requir…

This will break sites that count on "transitionend" event callbacks to determine when one part of an animation has finished to begin doing something else.

Can this be fixed with 1ms timings instead of 0ms?

Re: Allow disabling of motion or animation

#102
post #99

Earlier quoted context omitted.

I disagree! When my viewport is larger, I have space for niceties like always-visible menus. When my viewport is smaller, I need what little space is available to be entirely dedicated to content, even if it means open menus takes an extra click. I want websites to manage this tradeoff for me when I zoom or resize my browser window.

Both of you may be satisfied with a simple override switch-button. Yours will be always on, gp’s always off.

I was actually thinking after my comment... what if you could hold down e.g. shift while resizing the browser to resize the window without resizing the viewport reported to the website? So you could make the window narrower, then scroll horizontally so the menu is off-screen.

Re: Allow disabling of motion or animation

#103
post #99

Earlier quoted context omitted.

Both of you may be satisfied with a simple override switch-button. Yours will be always on, gp’s always off.

I was actually thinking after my comment... what if you could hold down e.g. shift while resizing the browser to resize the window without resizing the viewport reported to the website? So you could make the window narrower, then scroll horizontally so the menu is off-screen.

I move a window past the screen partially when needed. But it doesn’t work well at two-display border. Another real option is to find a container div and pin its width via stylebot.

Re: Allow disabling of motion or animation

#104

Earlier quoted context omitted.

It's almost impossible to reliably distinguish animations required for a web site to work properly from animations and changes that can and should be disabled. For example, try to distinguish (from "definitely should be blocked" to "definitely can't be blocked without breaking things"): - An ad mascot hopping up or down telling you to click it - A loading spinner spinning - A progress bar - Information you're waiting…

>that the next ad mascot will be written in JavaScript The horror....

> that the next ad mascot will be written in JavaScript

That's quite literally true already: https://nextjs.org/conf

Re: Allow disabling of motion or animation

#105

I have low-motion set on my android device and support for it is let's say highly variable I also have no idea why the system bothers with most of the animations -- the material 'hero animation' where there are two different animations with sequential curves is awful https://docs.flutter.dev/development/ui/animations/hero-anim... . The 'stretch at end of scroll' feature was making people sick if you believe reddit ht…

The over-scroll stretch animation in Android 12 makes me sick so I had to disable animations completely, as there is no option to just disable that.

This does have the effect of making Firefox buggy and not showing the content at the top of a page before you scroll down and up again. Which only works on sites you can scroll on.

Re: Allow disabling of motion or animation

#106
post #105

I have low-motion set on my android device and support for it is let's say highly variable I also have no idea why the system bothers with most of the animations -- the material 'hero animation' where there are two different animations with sequential curves is awful https://docs.flutter.dev/development/ui/animations/hero-anim... . The 'stretch at end of scroll' feature was making people sick if you believe reddit ht…

The over-scroll stretch animation in Android 12 makes me sick so I had to disable animations completely, as there is no option to just disable that. This does have the effect of making Firefox buggy and not showing the content at the top of a page before you scroll down and up again. Which only works on sites you can scroll on.

I'm happy about the scroll-stretching since it's at least something that happens when scrolling reaches the end rather than just abruptly stopping. My mind head would expect the list to keep scrolling but it just wouldn't without any physical metaphor for why it wouldn't. iOS does this much more nicely.

Re: Allow disabling of motion or animation

#107

I don't mind animation in general, but I hate smooth scrolling (first thing I disable when installing any browser). There is a trend of adding fake smooth scrolling using js/css, unfortunately.

Counter-point: Smooth scrolling is an essential feature for me. I bought a specific mouse for this because I find sudden line-jumps so disorienting.

Re: Allow disabling of motion or animation

#108
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't happen in the physical world and it startles me for a moment (longer than a transition would have lasted for).

Re: Allow disabling of motion or animation

#109
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/night preferences.

Re: Allow disabling of motion or animation

#110

Earlier quoted context omitted.

It's almost impossible to reliably distinguish animations required for a web site to work properly from animations and changes that can and should be disabled. For example, try to distinguish (from "definitely should be blocked" to "definitely can't be blocked without breaking things"): - An ad mascot hopping up or down telling you to click it - A loading spinner spinning - A progress bar - Information you're waiting…

If it moves spontaneously, it's unnecessary animation. It is necessary for things to move only if: - they are objects being dragged by the mouse (or finger in the case of touch input). - they are the content of an animated image or video being played. (User preference needed there: auto-play or not.)

How does that address "Information you're waiting for being loaded once some process completes"?

Do you want to delay the entire page until absolutely everything is loaded?

Maybe you want some clever code checking that you only go from blank to filled, and you'd better have the size ready up-front?

Post reply on HN