How to disable animation?

[darkblaze69]

Question
How to disable all those gorgeous animations? It slows down the workflow (waiting for finishing that spectacular transition and sliding of all the elements when opening another page) and distracts from the main purpose of writing or reading articles.
There should be a way to disable it, just cannot figure out how to do this.

[NGPixel]

There's no animation when reading pages or when loading / saving pages in the editor. Which animations are you referring to precisely?

As for disabling all animations, follow this topic: https://requarks.canny.io/wiki/p/un-animate-user-interface

[shriker]

@darkblaze69, from what I can tell, there are things like fade in animations on the buttons for the editor view, and a lot of slide animations inside of the Administration Area.

There aren't many animations while viewing, but to make things seem snappier you can disable the ripple effect, as well as make animations stop interfering with pointer events.

Administration Area -> Theme -> CSS Override

.v-ripple__container {
  display: none !important;
}
.v-list-item:not(.v-clickable),
.v-open-menu-container:not(.v-clickable),
.v-select-menu-container:not(.v-clickable),
.v-select-value.v-select-placeholder {
  pointer-events: all !important
}

Pasting that in will make your wiki's navigation feel quicker, but it won't do anything for the Admin or editing views.

[Halogenek]

Hi,
First, this software is an awesome tool but I'd like to switch off all the animations. Is there a way to make the site more "static"? Not only for the editor but also for the admin panel?

[billytetrud]

Yes please, the animations immediately feel like an impediment to using the system. For example, when clicking on the button to edit a page, the sidebar icons take over 1 second to all appear after the page has loaded. Same thing when clicking on the "Assets" button - it takes about 1 second for the overlay to all appear and stop moving (this is in the markdown editor). Same thing for any button you press in the settings - views take about a second to stop moving. All this adds up to a massive waste of time over the course of a lot of use. I might click on buttons with 1 second animations 100 times a day. That's a whole lost work day per year per person just from these animations.

Please make any animations like that like 10 times faster or have an option to disable them for all users.

[billytetrud]

I created a pull request that should make things feel significantly faster: #4730 . Is there a way to manually override the styling for the whole app (including the editing tools and settings etc)?

[theHacker]

A quick and dirty hack:

Go to Admin / Theme -> Code Injection and add this CSS

*,
:after,
:before {
  transition-property: none!important;
  transform: none!important;
  animation: none!important
}

The same has to be added manually to /wiki/assets/css/admin....css to apply also to admin areas.

Improves page speed and therefore UX a lot.
Downsides from this brute-force method I have seen so far:

• Input controls will overlap value and label
• Boxes will still jump around

When putting more effort into this CSS, for sure can be improved. Hope it helps someone as a starting point.

---

https://requarks.canny.io/wiki/p/un-animate-user-interface says disabling animations overall as an option is added into version 3, will try the 3.x alpha and see if it's already done 🤞