More animations for a more fluent interface (see content for examples)
Open
@kra-mo is already working on this.
Since May 27, 2026.
2. developing
design
enhancement
- Dominant language
- PHP
- Stars
- 36.9k
- Forks
- 5.2k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 713
Description
https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design/
We should probably use 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
- …
More animations initiative
- More snappy navigation and sidebar appearing: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8691
- Action menus opening: https://github.com/nextcloud-libraries/nextcloud-vue/issues/8690 – PR at https://github.com/nextcloud-libraries/nextcloud-vue/pull/8769
- Header menus opening: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8770
- Hovering of navigation entries more playful: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8685
- Hovering of sidebar tabs more playful and with icon animation: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8793
- Hover of menu entries: Same thing as for nav entries and sidebar tabs
- More responsive controls: https://github.com/nextcloud-libraries/nextcloud-vue/pull/8579
- Switch toggle animation: https://github.com/nextcloud-libraries/nextcloud-vue/issues/8043 → PR https://github.com/nextcloud-libraries/nextcloud-vue/pull/8045
- Checkboxes and radio buttons animation: https://github.com/nextcloud-libraries/nextcloud-vue/issues/8684
- Possible extra in apps:
- 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
- …
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.