Gentle
A slow, overdamped spring that eases in without any edge.
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
1762 ms
When to use it
Negative bounce over-damps the spring, so it creeps to its final position. Use it where motion should feel calm and ambient rather than reactive, such as background transitions or content fading in after a load.
- Ambient background changes
- Content reveal after load
- Calm onboarding
- type
- spring
- bounce
- -0.25
- perceived
- 0.7s
- settles
- 1762 ms
:root {
--ease-gentle: linear(0, 0.0145 1.17%, 0.056 2.5%, 0.413 10.5%, 0.5176 13.33%, 0.6049 16.17%, 0.6844 19.33%, 0.7541 22.83%, 0.8107 26.5%, 0.8594 30.67%, 0.898 35.17%, 0.9295 40.33%, 0.9714 53%, 0.9915 70%, 1);
--ease-gentle-duration: 1762ms;
}
.element {
transition: transform var(--ease-gentle-duration) var(--ease-gentle);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-gentle: ease-out; }
}