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 https://www.reddit.com/r/GooglePixel/comments/qcadhq/the_ove...
These also take upwards of a second, which is a lot of time when I'm trying to get somewhere. I suspect they're being emulated on the CPU on older hardware, contributing to jank and battery issues
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
Fancy 'different parts of the layout have different scrolling rules' in e.g. android google maps are deranged and make everything worse
Rip it all out and focus your energy on making usable software for people maybe?
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.
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 for being loaded once some process completes
You could disable all CSS animations and GIFs, but that will kill the loading spinner and risks that the next ad mascot will be written in JavaScript. And it will still not stop one of the biggest offenders in terms of blinking, ads that are being replaced by a new ad every 30 seconds.
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.)
See how it works in the Android world: anything that uses Animation, AnimationSet, ObjectAnimator, Compose animations, etc, all respect the system setting of animation speed (from 0 to 3x). As a developer, as long as you use the proper API, it'll work.
So, no, your ad mascot should be written with those APIs, and not using them should bring a massive performance cost that makes you think for a second or two about whether you're doing it right.
Whilst it's possible to support animation (and in fact does support video playback, at greatly-reduced image quality), at the higher-quality display modes most appropriate for text, all animation at < 1--2 s framerate, and virtually all animation outside actual paginated navigation (scrolling is possible, but ... unpleasant), really should die.
The prevalence of animations and video on the present web (the device supports web browsing, it's an Android tablet with an e-ink display) makes for an exceedingly unpleasant experience.
1. Maybe in 100 years, when we have powerful AI that and reliably identify problematic animation.
Unfortunately, Duolingo ignores this flag for many animations, and more than half of the screens are still animated.
I find the animations Duolingo uses to be obnoxious distractions, and I want them to be actually disabled when I tell it this. I also want this kind of thing to be switchable on a per-app level, so that I have a way to override the (I assume) opinion of the art department or the marketing person that thinks these animations are engaging or fun without having to also disable the non-obnoxious animations my other apps have.
(Mind you, at this point I'm thinking Duolingo has been a lost cause for the last few years; although the courses seem to still be improving, the UX has been getting worse faster).
A better option is to respect the user, and if your site really can't run without animation, then just show an error stating that...Which shouldn't be a problem considering how many websites refuse to work just because you are using a chromium alternative that is realistically supported but just isnt Chrome itself.
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/spec that gets devs to do the right thing by default would be a great thing.
If it matters, it should happen by itself unless someone turns it off.
I don't really think you can force people to use a restrictive animation API (and nothing else) since it would have to generalize over all animation needs. Meanwhile, on iOS, SwiftUI is very far from generalizing over all needs—as an example of what a restrictive set of tools might look like. I don't think it's even possible, and the imperative kit will always have to exist.
...which basically all of them will naturally do, because their goals are almost certainly not going to be aligned with yours.
@namespace url(http://www.w3.org/1999/xhtml);
*, :before, :after {
transition: none !important;
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
This gives me the best "reduced motion" 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 https://news.ycombinator.com/item?id=30237846 . I haven't noticed it breaking anything important. The same can be put in chrome/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).
I've never seen a UI animation I thought was necessary.
I was using https://addons.mozilla.org/en-US/firefox/addon/no-transition... which operates on the same principle.
You can try yourself it breaks the google login form. You don't need an account to try: just "login", enter a random address, and watch the password prompt not being enabled as it waits for the transition to complete.
Similarly, slack breaks doing random actions that have some blur animation you often don't notice. It's usually always a consequence of transitions and animations that are chained with JS events.
I tried myself to come up with some attributes that would be more robust (just as reducing the step count instead of disabling the animation completely), but nothing has worked in a reliable way.
Count me in as one of the folks that hates animations in UIs, so I would really love to hear if anybody has a solution to this.
This extension doesn't seem to be available anymore.
...the fact that it's called "legacy" is ominous and a sign of things to come. The fact that other browsers have been quite aggressive at slowly destroying any real form of user-controlled customisation is quite telling too. (For exmaple, did you know that IE supported user stylesheets all the way up to its last version, but Edge no longer does? And Chrome removed that functionality over half a decade ago.)
I'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!
Even Mozilla is an offender with their otherwise splendid MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...
I want websites to manage this tradeoff for me when I zoom or resize my browser window.
I’m tempted to start a gallery a la Plain Text Offenders or js;dr.
What about those of us that see no need of user interface elements that flollop about doing some kind of 'me Me ME!' dance, when we just want to get things done?
I get it, if you're building a webpage maybe that's your artistic vision, and I'm specifically railing on OS animations, but the question still stands, 'why does it have to be an accessibility thing'? How about a plain, flat, respectful 'turn it OFF bc the user just doesn't want that' kind of option?
Don'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 "look at my mad skills". It's just disrespectful to tell the user they have an 'accessibility' issue, just to get things the way they want them.
> “look at my mad skills”
I’m torn about this: there are enough unneeded and horrible animations that I completely understand this point of view of wanted to get rid of all of them.
I also see that as throwing the baby with the bath water. There’s also fundamentally useful and informative animations to tell you something changed, what you’re supposed to do with an element or even what type of content you’re looking at.
As an unintentional experiment, when I got my new phone a few weeks ago I checked “disable animations” first and foremost, and started using the device normally. And everytime I was doing a specific action the screen froze with a round arrow. It took me 5 min to understand that page and app transitions where, well, “animations”, and getting rid of them made for a broken experience.
Same for popups and dialogs. Did it come from the top of the screen or from somewhere else in the app ? If you saw the animation you’d understand it immediately, before even parsing the design of the popup or the content.
I think we’re far away from the time where animations where random animated gifs with no meaning, and platforms are mature enough to use them in more advanced and useful ways most of the time.
I, too, was a bit confused at the frozen arrow in the beginning, until I realized it was just the loading indicator used when animations are disabled (they could probably improve that one). It is the one place where some sort of movement might still be appropriate.
Anyway, I recently disabled this feature due to it breaking the scroll behaviour in Play Store. Ironically the only app (I've noticed) that uses animation for scrolling in a way that makes this accessibility feature break it, making it a very jarring experience.
Instead, I went into developer tools and scaled all animations down to 0.5x. This at least makes all the annoying transitions bearable. I think this setting should also be exposed under accessibility settings.
I don't get it. That sounds like the OS is fundamentally broken that it assumes a hard coded timer is required before it does the next step.
Now you experience the reality of just how slow and bloated a lot of software is; the animations were just an attempt at hiding that.
IMHO there should be very, very little need for a full "loading screen" with all the ocmputing power we have these days.
Which phone? I'd like to know what not to purchase.
The rule is that you should never have to wait for a UI animation - That said, UI animations done correctly, which are subtle and extremely short, do enhance perception of UI controls state and transitions. But I can't blame people for the broad hate towards animation on the web, so much of it is done poorly in a way that detracts from the overall experience.
It's hard to tell for sure where it's just a happy coincidence and where it is a pretext to make it either more appealing or to force people to do it under some other requirement, but you see this everywhere
- Some hostile "optimization" ideas by airlines getting nixed by safety arguments, certainly not at all influenced (/s) by the humans working at those regulators not wanting other humans to be subjected to that
- Animal rights activists using climate change as the main argument because it's a more popular topic now
- People trying to ban technical terms like "blacklist"/"whitelist" claiming the goal is more precise terminology
I'm sure there are plenty more examples.
> What about those of us that see no need of user interface elements that flollop about doing some kind of 'me Me ME!' dance, when we just want to get things done?
If it’s a hindrance to you getting things done—to your access—that’s an accessibility issue. Accessibility that benefits you doesn’t imply anything about you, it’s an affordance for you to get whatever you need out of that access.
For example: video transcripts might be a benefit for people with auditory and/or visual impairments. But they also benefit me because I prefer not to consume video content the vast majority of the time. They help me access content I’d otherwise probably never consume. That’s… accessibility too!
Sadly we live in a world where developer time is a cost, and the cost of respecting user preferences is way down the list of things to spend cash/time on ... unless, of course, an A/B test showing that common courtesy leads to better conversions gets deployed and runs to significance.
Saying that, I don't believe we should give up on the fight to better respect our users' preferences. For my part, I've designed my JS library in a way to make it as easy as possible for developers to build interactive 2d canvas-based graphics that are as respective of user choices as possible[1][2][3]. If nothing else, it demonstrates to other developers that such things are not impossible to achieve.
[1] - https://codepen.io/kaliedarik/project/full/AMVKPx - Accessible stacked bar, and line, charts
[2] - https://codepen.io/kaliedarik/project/full/AzWnNa - Header text colorise and animate effects (respects prefers-color-scheme, prefers-reduced-motion, etc)
[3] - https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson - tutorial on how to make the 2d canvas more accessible/respective of user choices
Whenever somebody tells me they want a new phone because their old one is slow, I recommend disabling all animations. After that they usually just keep their phone because it feels like it's new again.
Framing it as an accessibility issue makes it harder to remove.
I agree with counter points showing how animation can add useful context, particularly in response to user interactions. This fails to address the crux of the issue greenbit brings up: the 'me Me ME!' dance. Yes, there are some places animation is indispensable, but the problem is that 95% of them (and their ilk) are giving the other 5% a bad name. The best way to enjoy and maintain focus is to not have to be constantly on-guard for hijack attempts.
Add in the fact that so many things exhibit this behavior (animations just tend to be the worst), multiply by how many sites/apps you spend time with. Even major, paid products can be problematic. With the web, ads, newsletter/don't-go/"privacy"/etc pop-ups are bad enough already.
I think we can take things a step/leap further: icon/logo/front-page take-overs and how aggressively those are pushed in front of user eyeballs. I believe (citation wanted!) that publishing control over the Google doodles is subject to a very strict approval process to curate a very specific, subtle "experience". It has to be the most valuable space of virtual real estate in the world, even despite limitations. It's certainly the most obnoxious to me.
So if there is to be general agreement on how things improve, I'd rather it be based on something broader than accessibility, but if accessibility wins some ground I'd appreciate it nonetheless.
But I do have to accept that this makes the app look less "polished" or "modern" at a first glance and likely makes some people look at competitors when they come to evaluate the app.
This is somewhat similar to gyms (bear with me here): a newbie will choose a gym based on how many machines they have. An experienced person doing strength training knows that the only thing that matters is how many racks they have. Gyms know that, hence the large numbers of largely useless machines (and a very limited number of squat racks and barbells, because strength trainers are the worst customers to have: they actually do go to the gym). The decision to subscribe is being made based on the superficial.
If you can’t find your glasses, being able to magnify the screen comes in handy.
Outside in the sun? Features for the sight-impaired like increasing the contrast helps.
These in-between states gives us well-needed information and are not artistic at all. Sure, they can be emulated badly, but for example iphone’s app switcher is imo a very natural implementation of how it should be done. Won’t make the action take any more time, but it does instruct on what happens very accurately. Compare it to i3’s instant desktop switching, which gives us barely any info to work with.
This feels like arguing that when we type, the computer should scribble each letter just as we would with a pen, or when a web page loads, it should slowly fill in like it did on dial-up. I want the computer to work as an extension of my brain; it should react as fast as I can think. I want it to show me something, and that thing simply appears as it would in the mind's eye.
"Instant" is a feature, not a bug.
The spec talks about "moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content"
It's relatively uncommon to encouter this as part of an app or actual legitimate content, but most sites that have ads would violate this spec. And I've noticed that I found those moving elements distracting enough that I just furiously closed a site and gave up on pursuing the information on it when I had the misfortune of encountering a news site on a PC without an ad blocker.
Instead, it explains there is accessibility issue and teaches how to fix that.
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.
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)
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 "prefers reduced motion".
I guess it’s a badly named property if everyone treats it like "prefers no motion".
There is a trend of adding fake smooth scrolling using js/css, unfortunately.
I don't know why desktop mice are still stuck in this 80s era of jittery scrolling while trackpads and phones have been scrolling with pixel perfect accuracy for over a decade. And now every product page is tying animations to scroll position which looks great on smooth scroll devices but play as 1fps animations for mice users.
> sudden line-jumps
This is definitely something needs to get used to. But the biggest advantage of non-smooth scrolling is that it starts and stops instantly with zero overshoot, which is what I hate of smooth scrolling.
To be more clear, I actually use all three types of scrolling, for different scenarios.
I manually drag scroll bar for finer control, and it has no suden jump issue. I also use auto-scroll (middle click) for super quick scrolling (which is kinda like smooth scrolling).
Apple has a lot of accessibility stuff, built-in, and API flags exposed, all over. It has some really comprehensive user-facing accessibility controls.
I think I should probably still review the app I'm working on, just to make sure that I'm honoring the users' wishes.
@media (:not(prefers-reduced-motion)) {
.animate-me {
animation: pulse 400ms infinite;
}
}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.
[1] - https://addons.mozilla.org/en-US/firefox/addon/disable-trans...
The day that happens, I'll figure out how to trick apps into thinking they are running on such a display.
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 all applications, including blinking caused by something like scrolling too fast through a task switcher.
If I were epileptic I would want something like this for my computer as a layer of safety.
FTFY
And also for the command line. Why there's no global option to switch off tqdm and all similar "modern" clutter? Like NO_COLOR but with all terminal animations and stuff.
https://kagi.com (you should see stars and clouds animate, same is used for logged in users on the main search landing page)
We have a FAQ entry how to find this setting in different OS so that users can control it: