Duration
Duration controls how long an animation takes to complete, ranging from ultra-quick micro-interactions to longer, more elaborate transitions. View duration tokens.
- Quick Transitions should use duration tokens between short and xxx-short.
- Standard Animations should use short and moderate duration tokens.
- Complex Animations should use duration tokens between moderate to xxx-long.
Transformation
Tranform tokens provide precise control over how elements change positions, scale, or rotate during animations. View transformation tokens.
- Fade controls opacity for elements appearing (0% to 100%) or diappearing (100% to 0%).
- Rotation changes an element's orientation around its center point by specifying degrees of clockwise or counterclockwise rotation.
- Scale changes an element's size by adjusting its dimensions, either uniformly (maintaining proportions by adjusting both X and Y values) or non-uniformly (modifying width and height independently by adjusting X or Y values separately).
- Slide moves elements between positions, with elements either entering (slide-in) or exiting (slide-out) the screen.
Easing
Easing functions define how animations progress over time, making movements feel more natural and engaging. View ease tokens.
- Ease-in starts slow and accelerates towards the end (like a car gaining speed), making them ideal for elements leaving the screen, fade-out animations, and objects falling due to gravity.
- Ease-out starts fast and decelerates towards the end (lie a car coming to a stop), and are ideal for elements entering the screen, pop-up menus and modals, fade-in animations, and objects falling due to gravity.
- Ease-in-out provides smooth transitions by starting slowly, accelerating in the middle, and decelerating at the end - making them perfect for state transitions, page changes, and complex UI interations that remain visible on screen.