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 curve
overshoot 0.2%run it
Driven through WAAPI with the value below — no library, no per-frame JavaScript.
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.