Motion

Duration

We provide different durations as materials, for your convenience. Durations are expressed as a number of miliseconds.






Available durations

  • duration120 – used in transition which directly correspond to user input (eg. hover).
  • duration500 – fade-in of larger components.

Easing






Emotion Helpers

For use in styled componets you can use one of these predefined Emotion CSS mixins:






  • interactiveTransition: applies transition to all properties, with a duration suitable for interactive elments (buttons, cards, links etc).