Design springs and easing curves. Export pure CSS.
Springs ship as linear(). How it works
Keyboard shortcuts
- Space
- Play
- B
- Compare: keep the current curve as B
- 1 – 6
- Switch scene
- C
- Copy the exported code
- ⌘Z / Ctrl+Z
- Undo
- ⇧⌘Z / Ctrl+Shift+Z
- Redo
- Arrow keys
- Move a focused bezier handle (Shift: bigger steps)
- ?
- Show this list
Curve
Load into
Springs
Bezier curves
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.
Overshoots, then settles.
s
How long it feels. It fully settles in 1669 ms, the exported duration.
Stiffness and damping
Mass is fixed at 1; only the ratio matters.
Preview
Publish changes?
Your edits will be visible to everyone.
CancelPublish
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.
Export
:root {
--ease-wobbly: linear(0, 0.0102 0.83%, 0.039 1.67%, 0.0839 2.5%, 0.1552 3.5%, 0.321 5.33%, 0.6668 8.67%, 0.8143 10.17%, 0.9453 11.67%, 1.0439 13%, 1.1236 14.33%, 1.1836 15.67%, 1.2244 17%, 1.2488 18.5%, 1.2527 20.17%, 1.2317 22.17%, 1.1913 24.17%, 1.0579 29.33%, 0.9998 32%, 0.9579 34.83%, 0.9376 37.83%, 0.9414 41.83%, 0.9987 51.33%, 1.0154 57%, 0.9963 76%, 1);
--ease-wobbly-duration: 1669ms;
}
.element {
transition: transform var(--ease-wobbly-duration) var(--ease-wobbly);
}
/* Browsers without linear() support (pre-2023) fall back to ease-out. */
@supports not (transition-timing-function: linear(0, 1)) {
:root { --ease-wobbly: ease-out; }
}26 stops · 346 chars · max error 0.0045