Creating CSS Spring Animations With The Linear Easing Function

While developing FilePond I wanted to run a CSS powered spring animation, but the CSS API didn’t support it natively. So I built this tiny tool to generate linear easing functions that simulate spring animations in CSS.

The app below uses a Svelte spring to animate a transition from 0 to 1, it then records the spring steps and converts them to a linear() CSS transition. As a bonus it also creates a CSS animation. The generated CSS code is available for copy pasting below the app.

Fine-tune the spring animation using the Stiffness and Damping controls.

The code blocks below will receive the resulting CSS transition and animation.

Waiting for data...

Waiting for data...