Duration should depend on the size of an object and the distance it travels. Smaller elements with small changes should move faster, while large and complex elements look better when the animation lasts a little longer.

Suggested durations have been provided as a starting point, however it’s important to prototype all animations and adjust as necessary.

#Motion scale

#Suggested easing and duration pairs

#Duration calculator

Coming soon.

#Delay duration

Delays commonly range from 0 to 500 ms. Some animations may require longer delays.

Suggested delays have been provided for exposing hidden content via hover or click. This avoids accidental activations and ensures that the user feels in control of the interface.