Motion

Speed

Motion speed should most often occur at the following standard increments.

🐌

Extra Slow

500ms

JS: motion.speedXSlow

CSS: psMotionSpeedXSlow

🐢

Slow

400ms

JS: motion.speedSlow

CSS: psMotionSpeedSlow

🐐

Normal

300ms

JS: motion.speedNormal

CSS: psMotionSpeedNormal

🐇

Fast

200ms

JS: motion.speedFast

CSS: psMotionSpeedFast

🐆

Extra Fast

100ms

JS: motion.speedXFast

CSS: psMotionSpeedXFast

Use the CSS variables to set the duration.

@import '@pluralsight/ps-design-system-core';

.mySelector {
  animation-duration: var(--ps-motion-speed-xfast);
}

To select a duration, use the following rules of thumb.

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.

Easing

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.

@import '@pluralsight/ps-design-system-core';

.mySelector {
  animation-timing-function: ease-in-out;
}

Rotation

Generally, larger objects look more natural when rotating slower than smaller objects. The easing property for rotation should be linear.

@import '@pluralsight/ps-design-system-core';

@keyframes rotateMe {
  to {
    transform: rotate(360deg);
  }
}

.mySelector {
  animation: var(--psMotionSpeedNormal) linear infinite rotateMe;
}