Easing Variables

Motion plays an increasingly important role in any modern web experience. Adding small bits of motion to a site can really help bring it to life and provide cues for users. It can be used to emphasize an important action, indicate a transitional property, or just as a bit of fun!

To help you out, we have baked-in some cheeky custom cubic-bezier transitions that you can use for your transitions or animations to help spice up those interactions.

Variables

$easeOut
$easeInOut
$easeIn
$easePop

🚧

Motion Sickness

Don't forget that you can use the CSS @media (prefers-reduced-motion: reduce) and @media (prefers-reduced-motion: no-preference) to detect if users have requested that the system minimize the amount of non-essential motion it uses. For more information you can check out these docs.

Examples

Smoothly change the background of button when hovered

.foo-button {
  background: $primaryColor;
  
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: $easeOut; // keep it smoooottthhhh 😎
  
  &:hover,
  &:focus {
    background: $secondaryColor;
  }
}

Grow card expressively when hovered

.bar-card {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: $easePop; // make it POP 💥
  
  &:hover,
  &:focus {
    transform: scale3d(1.1, 1.1, 1.1);
  }
}