COMPONENTS
Motion
Motion speed should most often occur at the following standard increments.
🐌
Extra Slow
500ms
psMotionSpeedXSlow🐢
Slow
400ms
psMotionSpeedSlow🐐
Normal
300ms
psMotionSpeedNormal🐇
Fast
200ms
psMotionSpeedFast🐆
Extra Fast
100ms
psMotionSpeedXFastSome general guidance on selecting a duration.
A small object moving a great relative distance may have slightly longer duration so that the movement isn’t too fast and abrupt.
Some general guidance on selecting an easing curve.
Use ease-in-out for moving point to point.
Use ease-out for entering elements.
Use ease-in for exiting elements.
Use linear for opacity or color changes.
When in doubt, use ease-in-out.
Generally, larger objects look more natural when rotating slower than smaller objects. The easing property for rotation should be linear.