Things move at the pace of a pour.
Motion is there to show where something came from or went. Three speeds and three curves cover everything. If it feels busy, slow it down or take it out.
Pick one of three speeds.
Quick, 160 ms. Hover and press feedback. --motion-duration-quick
Steady, 320 ms. Menus, panels and cards. --motion-duration-steady
Slow, 900 ms. Hero moments and steam loops. --motion-duration-slow
Pick one of three curves.
Pour. The default. Starts fast and settles gently. cubic-bezier(0.2, 0, 0, 1)
Steep. For loops and back-and-forth moves. cubic-bezier(0.65, 0, 0.35, 1)
Lift. For exits. Things leave quicker than they arrive. cubic-bezier(0.3, 0, 1, 1)
Our one signature move is steam.
Three soft lines rise and fade on the slow speed. Use it once per screen at most, for loading and for the hero.
Respect people who turn motion off.
When a device asks for reduced motion, every animation in this guide stops and content appears in place. Build products the same way.