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
psMotionSpeedXFast

Some general guidance on selecting a duration.

Use slower animations for larger objects or longer distances.

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.