Sheet
A heavier, slower spring for large surfaces like sheets and modals.
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
830 ms
When to use it
Large surfaces should feel like they have mass. A longer duration with a small bounce gives a bottom sheet or modal weight without wobbling.
- Bottom sheets
- Modals and dialogs
- Full-screen transitions
- type
- spring
- bounce
- 0.12
- perceived
- 0.6s
- settles
- 830 ms
:root {
--ease-sheet: linear(0, 0.0063 1.33%, 0.0235 2.67%, 0.0909 5.67%, 0.1829 8.67%, 0.503 18.17%, 0.6006 21.5%, 0.6814 24.67%, 0.7502 27.83%, 0.8075 31%, 0.8564 34.33%, 0.8986 38%, 0.9329 42%, 0.9601 46.5%, 0.9925 57.17%, 1.0026 70.83%, 1);
--ease-sheet-duration: 830ms;
}
.element {
transition: transform var(--ease-sheet-duration) var(--ease-sheet);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-sheet: ease-out; }
}