Documentation

Animations

Use purposeful animations to guide focus and provide functional feedback. Ensure transitions are smooth and do not disrupt the user task.

Work in progress

Currently, we only include basic animations and transitions in certain components such as loading indicators or toasts. Full animation support is still on our roadmap and is not implemented in all components or in full extend yet.

Copy link to headline:Less is more

The user should not be distracted by elaborate animations. Instead, they should support the user in his workflow, provide feedback and make the entire application easier to understand.

Copy link to headline:Durations

In general, you are free to use any duration for your animations and transitions. However, we provide a set of default recommended durations that ensure consistent timing across multiple components and applications.

sm
Duration400ms
CSS variablevar(--onyx-duration-sm)
md
Duration700ms
CSS variablevar(--onyx-duration-md)
lg
Duration1s
CSS variablevar(--onyx-duration-lg)

Copy link to headline:Accessibility

Animations can be uncomfortable for users with vestibular motion disorders(opens in a new tab). Therefore, users can configure their browser to prefer reduced motion which is provided to the application. Developers should consider this user preference and disable the animations and transitions in this case.