Motion
Use movements to facilitate understanding of how the interface and components work, as well as expressing and reinforcing the principles of the RD Station brand.
Principles
Moves should always be used with a purpose. Use to highlight a change of state, show new content or component, and to emphasize an interface element.
Movements should not take longer than necessary Animations should not make the person wait, nor prevent them from completing or continuing to perform a task.
Keep the metaphors that exist in the physical world. For example, if something entered the screen from the left side, it should come out from the left side and not up. Another situation: smaller elements move faster than larger elements.
Duration
Use one of 3 different speeds to make transitions:
| Token | Duration | Usage |
|---|---|---|
--motion-duration-extra-fast | 100ms | Use for state changes on small elements such as buttons, toggles, radio buttons, checkboxes, inputs, and more. |
--motion-duration-fast | 200ms | Use for micro-interactions, short expansions, or short-distance moves such as a select or dropdown. |
--motion-duration-normal | 300ms | Use for expanding medium-sized elements and alerting system such as Toasts. |
Acceleration
To be perceived more naturally by the human eye, all movements use acceleration. Use one of the 3 types below:
| Token | Curve | Description | Usage |
|---|---|---|---|
--motion-timing-function-ease-in | cubic-bezier(0.55, 0.055, 0.675, 0.19) | Gains acceleration over time. Ideal for removing elements from the screen. | Close modal, hide alert, collapse sidebar. |
--motion-timing-function-ease-out | cubic-bezier(0.215, 0.61, 0.355, 1) | Loses acceleration over time. Ideal for adding on-screen elements. | Show sidebar, show modal, show alert. |
--motion-timing-function-ease-in-out | cubic-bezier(0.645, 0.045, 0.355, 1) | Accelerates and decelerates gradually. Ideal for elements that are visible from start to finish of the movement. | Expanding a dropdown menu, a toggle, expanding a list. |