toolsfreeno account, nothing leaves your browser
Spring to CSS linear() converter
cubic-bezier() cannot overshoot, so it cannot describe a spring. linear() can: sample the spring once, and the curve rides along in a stylesheet with no physics engine at runtime. Drag the sliders, watch the block, copy the value.
presets
The first three are the springs kloq actually ships.
the sampled curveovershoot 100.2%
0settled — the dashed line is 100%1
run it
Driven through WAAPI with the value below — no library, no per-frame JavaScript.
paste this
transition-timing-function: linear(0, 0.1056, 0.2527, 0.4052, 0.5442, 0.6619, 0.7564, 0.8293, 0.8838, 0.9233, 0.9512, 0.9703, 0.9829, 0.9911, 0.9961, 0.9990, 1.0006, 1.0013, 1.0015, 1.0015, 1.0013, 1.0011, 1.0008, 1.0006, 1.0005, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0000, 1.0000, 1.0000, 1);—where this comes from
It is one function out of a calendar.
This page runs springLinear() and springSamples() from kloq/lib/springs — the same code that ships in kloq, not a re-implementation. Every interaction in the calendar is built to this standard, which is the whole pitch.