Easing Explorer
A quick reference for the four easing curves in the motion token system, visualised side by side so the differences are immediately readable.
Four easing curves cover most interface motion needs. The problem is they only make sense in motion — a cubic-bezier string tells you nothing. This is a quick reference to see them in context.
The four curves
| Token | Value | Use |
|---|---|---|
--ease-enter | cubic-bezier(0.0, 0, 0.2, 1) | Elements entering the screen |
--ease-exit | cubic-bezier(0.4, 0, 1, 1) | Elements leaving the screen |
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful feedback, confirmations |
--ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | State changes within the screen |
:root {
--ease-enter: cubic-bezier(0.0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
/* enter — fast start, gentle finish */
.entering {
transition: transform 600ms var(--ease-enter);
}
/* exit — gentle start, fast finish */
.exiting {
transition: transform 600ms var(--ease-exit);
}
/* spring — overshoots, snaps back */
.feedback {
transition: transform 600ms var(--ease-spring);
}
/* standard — symmetrical, neutral */
.state-change {
transition: transform 600ms var(--ease-standard);
}
Enter decelerates to a stop — the element settles in. Exit accelerates out — it’s already leaving. Spring overshoots its target before snapping back, which reads as responsive on small interactive elements. Standard is symmetrical and neutral — good for state changes that aren’t entering or exiting the screen.
The asymmetry between enter and exit is intentional: entering elements should feel like they’re arriving, exiting like they’re already gone.