Design
Component checklist
Up to date
React
Up to date
The UI motion library is a work in progress and subject to daily changes. Consult usage with the Soul DS team.
Duration
|
Variable |
Duration |
Potential usage |
|---|---|---|
|
--motion-duration-instant |
0ms |
Text change |
|
--motion-duration-quick-1 |
80ms |
Checkboxes, Radio buttons |
|
--motion-duration-quick-2 |
120ms |
Toggles, Tabs, Chips, Color, Button hover |
|
--motion-duration-moderate-1 |
180ms |
Dropdowns, Tooltips |
|
--motion-duration-moderate-2 |
270ms |
Modals, Snackbars, Dialogs, Notifications |
Easing
|
Variable |
Easing |
|---|---|
|
--motion-easing-ease |
ease |
|
--motion-easing-entry |
ease-out |
|
--motion-easing-exit |
ease-in |
|
--motion-easing-linear |
linear |
Position
|
Variable |
Value |
|---|---|
|
--motion-slide-up |
translateY(12px) |
|
--motion-slide-down |
translateY(-12px) |
Effects
Effects are the key to turning components from static to interactive and keeping UI elements alive.
Slide up fade
As a default setup, Soul recommends using duration --motion-duration-moderate-2 to show and hide the UI element with --motion-easing-entry and --motion-easing-exit easings and --motion-slide-up position.
Slide down fade
As a default setup, Soul recommends using duration --motion-duration-moderate-2 to show and hide the UI element with --motion-easing-entry and --motion-easing-exit easings and --motion-slide-down position.
Fade
As a default setup, Soul recommends using duration --motion-duration-quick-2 to show and hide the UI element with --motion-easing-linear.