Snappy
A critically damped spring. Fast, decisive, no wobble.
How to read it
Top row: where the element sits on each frame, so bunched ticks mean slow motion. Bottom row: the same frames in time order, each bar the distance travelled, so the settle is easy to read. Keys are circled.
Publish changes?
Your edits will be visible to everyone.
CancelPublish
588 ms
When to use it
Zero bounce means the element arrives as quickly as possible without overshooting. It reads as confident and responsive, which makes it a safe default for most interface motion: panels, tabs, segmented controls.
- Tabs and segmented controls
- Panels and drawers
- General UI default
- type
- spring
- bounce
- 0.00
- perceived
- 0.4s
- settles
- 588 ms
:root {
--ease-snappy: linear(0, 0.0201 2.33%, 0.0834 5.17%, 0.1586 7.67%, 0.4603 16.83%, 0.5555 20.17%, 0.6382 23.5%, 0.7082 26.83%, 0.7666 30.17%, 0.8166 33.67%, 0.8602 37.5%, 0.8992 42%, 0.9296 46.83%, 0.9712 58.5%, 0.9913 73.67%, 1);
--ease-snappy-duration: 588ms;
}
.element {
transition: transform var(--ease-snappy-duration) var(--ease-snappy);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-snappy: ease-out; }
}