nextcloud-vue icon indicating copy to clipboard operation
nextcloud-vue copied to clipboard

Reduced motion sickness animations

Open janepie opened this issue 2 months ago • 4 comments

In many places of Nextcloud, motion sickness is induced, for example:

  • loading icons
  • modal loadings (they grow a bit when opened)
  • app navigation bar moving upwards when hovered
  • Scrolling
  • and more I may have not seen yet

Solution: There is a setting for “reduced motion animations available on every operating system which should be respected by the library. This website explains how to do it and where to find the settings on each OS: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

As an example, I made this change for custom animations in Assistant in this PR: https://github.com/nextcloud/assistant/pull/365

Not all animations are inducing motion sickness, only things that move parts of the website in relation to other parts, or animations that “move” a color gradient. Elements appearing or fading are fine in that regard and can still be used, also as a replacement if the setting is activated. If the movement is supposed to trasmit essential information to the user, it should not be just removed but be replaced by something else transferring that information (which can also be a color, an icon, …)

janepie avatar Oct 08 '25 12:10 janepie

only things that move parts of the website in relation to other parts

I guess, it is NcAppNavigation and NcAppSidebar

ShGKme avatar Oct 08 '25 16:10 ShGKme

Once https://github.com/nextcloud/server/pull/55406 is merged we can provide util like for dark theme and use it for those places.

susnux avatar Oct 10 '25 10:10 susnux

Why not use native settings?

ShGKme avatar Oct 10 '25 16:10 ShGKme

Why not use native settings?

It is using both, see the media query. But similar with dark mode we cannot always trust the system. Either it might not implement it or you are using a device where you have no permissions to change such settings (e.g. public devices), so we also need an option to enforce this in Nextcloud independent from the system.

susnux avatar Oct 13 '25 13:10 susnux