cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Disable fade animations on toolbar buttons

SilasLock
Making moves

The top-right of the Firefox UI on Windows looks like this:

SilasLock_0-1756263503315.png

Yours may look a little different, since this toolbar is customizable; my toolbar contains the downloads button, my extensions, and of course the all-powerful hamburger button.

As of a recent Firefox update within the last few months, fade animations have been added to the menus which open/close when each of these buttons is clicked.

I strongly dislike these animations. In Windows, I've disabled all system animations for a reason: they make my computer feel sluggish, like there's additional latency in between my button presses and actions taken on the screen. I'd prefer for these windows to open and close instantaneously, like they used to.

This preference of mine is extraordinarily strong. It, uh, actually causes me a fair amount of distress to have to interact with animated GUIs, and I'm aware that makes me an outlier. For me, being able to disable animations is primarily an accessibility concern. Most people are not as sensitive to them as I am. However, from conversations with many friends and colleagues, I do know that there are many people who share a preference for non-animating GUIs, even if their preference isn't as overwhelming.

 

Some proposals:

1. Scan the Windows systems settings for whether the user has "Show animations in Windows" disabled. If so, remove the fade animations. If instead the user has "Show animations in Windows" enabled, play fade animations when the toolbar buttons are pressed.

2. Remove the fade animations altogether, regardless of the user's settings.

3. Introduce an additional settings option in Firefox, which the user can toggle to enable/disable fade animations. This would be independent of their system settings.

 

I want to briefly talk over all three to kickstart discussion.

Solution (1) would immediately satisfy my use case, but I'm uncertain whether it's feasible to do--I'm not a professional developer, and don't know if Windows gives applications (like Firefox) access to the user's system settings, including "Show animations in Windows." I'm hoping a browser developer could chime in here.*

Solution (2) would also immediately satisfy my use case, and even though it's a "one-size-fits-all" solution, I honestly don't think it would bother too many people. I've searched the Mozilla discussion boards pretty heavily to see if there was a community-led push to animate these buttons, and couldn't anything. My best guess is that these buttons had fade animations added on a whim because someone (with good intentions!) thought fade animations looked prettier, not because there was really strong community demand. In part, I'm opening this discussion because I'd like to see if there is some underlying community demand that I missed!

Solution (3) is the one I'm most wary of, for two reasons.

  1. Firefox, by contrast with several other browsers, has a smaller and easier-to-understand settings menu. I've always gotten the sense this was an intentional design decision, and I don't want to propose additional settings unless there is a real, consistent divide in people's preferences on whether they want fade animations and where those preferences are extraordinarily strong on both sides, rather than just one side.
  2. In my personal experience, "disable animations" settings in applications are frequently confused with "disable motion" settings. I'm not sensitive at all to GUIs that move, but some people are! For those people, they select "disable motion" in applications to express a desire to convert animations with movement into fade animations. But I'm equally sensitive to fade animations, if not moreso! Thus, I'd be concerned about introducing any kind of settings toggle (that future Firefox features might depend upon) for one of these two preferences and not the other, since those future features might get the distinction confused.

In a nutshell, solution (3) has pretty broad and far-reaching scope, when the problem itself ("I'm extremely sensitive to these toolbar button animations") is small and local.

However, any of these solutions would be preferable to the status quo for me. The earlier this could be addressed, the better! It's, uh, currently really unpleasant for me to use Firefox because of the fade animations. I never would have made an account and started a community discussion unless it was bothering me to an unusual degree.

 

 

*I also don't know whether solution (1) would elegantly extend to Linux, which I would like to switch to at some point in my life and which has a design language (unlike MacOS) which consistently de-emphasizes animations.

1 ACCEPTED SOLUTION

> ui.prefersReducedMotion

You can add it with a value of 1, but it doesn't work on those things.  You need this in your userChrome.css file:

menupopup,
panel {
transition: unset !important;
}

View solution in original post

5 REPLIES 5

igorlogius
Making moves

For me, being able to disable animations is primarily an accessibility concern. 

`about:config` > `ui.prefersReducedMotion` 

That might help.

Sadly, I don't think "ui.prefersReducedMotion" is a valid flag within about:config. Maybe it existed in a previous version of Firefox, and that's where you're recalling it from?

I also want to emphasize that even if a flag like 'ui.prefersReducedMotion' did exist, it likely wouldn't solve the problem I'm talking about. Like I describe here:

 


In my personal experience, "disable animations" settings in applications are frequently confused with "disable motion" settings. I'm not sensitive at all to GUIs that move, but some people are! For those people, they select "disable motion" in applications to express a desire to convert animations with movement into fade animations. But I'm equally sensitive to fade animations, if not moreso! Thus, I'd be concerned about introducing any kind of settings toggle (that future Firefox features might depend upon) for one of these two preferences and not the other, since those future features might get the distinction confused.

> ui.prefersReducedMotion

You can add it with a value of 1, but it doesn't work on those things.  You need this in your userChrome.css file:

menupopup,
panel {
transition: unset !important;
}

Thank you so so much, this did the trick!

I still think a more systematic solution would be even better, but I'm setting this as the accepted solution so that everyone who's struggling with the same problem knows that modifying the userChrome.css file the way you've described does indeed remove the fade animations.

Thank you again!

johnwick5656
Making moves

I understand your point very well. Animations may look smooth for some users, but for others they create a feeling of lag and distraction. It makes sense to give people an option, especially for accessibility reasons. Personally, I think Firefox respecting the system setting would be the best compromise. Even a small toggle in about:config could already make a big difference for those who prefer instant responsiveness.