IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Code HelpersIconUiExpandCollapseDown
Design AssetsIconUiExpandCollapseDown

Animations

Simple values to make breathing life into your interfaces easier.

Web
React Native
Android
Apple

Durations

The larger the element, the slower the duration.

NameValueVariable
Fast0.15svar(--animation-duration-fast)
Default0.3svar(--animation-duration-default)
Slow0.45svar(--animation-duration-slow)

Easings

Use the name of the easing to guide when you should use it.

NameValueVariable
Staticlinearvar(--animation-easing-static)
Movingease-in-outvar(--animation-easing-moving)
Enteringcubic-bezier(0.175, 0.885, 0.32, 1.275)var(--animation-easing-entering)
Exitingcubic-bezier(0.6, -0.28, 0.735, 0.045)var(--animation-easing-exiting)