https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design/ We should probably use [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) to set `--animation-quick` and `--animation-slow` to 0? ## Good examples in Nextcloud - Hover/focus of the main app navigation https://github.com/nextcloud/server/issues/46542#issuecomment-2260076320 - Animation of switch toggle component: https://github.com/nextcloud-libraries/nextcloud-vue/issues/8043 - Talk: Device/background picker https://github.com/nextcloud/spreed/pull/12815 - Talk: Sending messages → Sliding them from the input field into the content - Modals open with a slight zoom-in animation - Opening of left navigation and right sidebar - … ## Where we can do more - Controls feeling more responsive: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8579 - Improve animations of app-navigation and right sidebar https://github.com/nextcloud-libraries/nextcloud-vue/pull/8691 - Action menus → Quick shift-down animation: https://github.com/nextcloud-libraries/nextcloud-vue/issues/8690 - Hovering entries in app-navigation → Movement of highlight bar https://github.com/nextcloud-libraries/nextcloud-vue/pull/8685 - Hovering tabs in the sidebar → Also movement of highlight bar - Files: Expanding of "Favorites" and "Shares" in left navigation → Expand/collapse animation - Talk, Mail and other lists: Deleting items → Quick vertical compression animation - Mail: https://github.com/nextcloud/mail/pull/13274 - Mail: "Show all mailboxes" and "Collapse mailboxes" → Expand/collapse animation - …
https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design/
We should probably use prefers-reduced-motion to set
--animation-quickand--animation-slowto 0?Good examples in Nextcloud
Where we can do more