(opens in a new tab)

Animations

Purposeful animations and transitions that guide focus, provide feedback, and respect user motion preferences.

Work in progress

We currently include basic animations and transitions in components such as loaders and toasts. Extended animation support is on our roadmap.

Copy link to headline:Principles

Animations should clarify interactions rather than distract. Use motion purposefully to indicate state changes, provide feedback, and maintain orientation.

Copy link to headline:Durations

Use standard duration variables to ensure consistent animation timing across components:

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

Excessive or unexpected motion can trigger symptoms in users with vestibular motion disorders(opens in a new tab). Respect the prefers-reduced-motion media query by disabling non-essential transitions when requested by the user's system preferences.