Sigmoid overview
Curve editorTune an easing. Copy it as CSS.
Springs and S-curves cannot be written as a cubic-bezier(). Sigmoid solves them and turns them into a short CSS linear() value that runs natively in the browser. Pick a curve, tune it, and take the code with you. Every setting is in the address, so a curve is one link.
Editor
Move it until it feels right.Spring, S-curve or Bézier.
Press play to run the curve as a plain CSS transition. For a Bézier curve, drag the two handles in the plot.
CSS
transition: transform 983ms linear(0, 0.0009 0.42%, 0.0078 1.25%, 0.0293 2.5%, 0.062 3.75%, 0.0888 4.58%, 0.1189 5.42%, 0.1689 6.67%, 0.2232 7.92%, 0.4754 13.33%, 0.5859 15.83%, 0.6539 17.5%, 0.7013 18.75%, 0.7455 20%, 0.7862 21.25%, 0.8234 22.5%, 0.8571 23.75%, 0.8875 25%, 0.9229 26.67%, 0.9656 29.17%, 0.9828 30.42%, 1.0017 32.08%, 1.0226 34.58%, 1.0359 37.08%, 1.0439 40%, 1.046 42.92%, 1.0409 47.92%, 1.0121 62.5%, 1.0027 70.42%, 0.998 82.08%, 1);Get started
The same curves in your code.MIT licensed, free for every project.
Install the package and use the curve as a function, as CSS, with Motion or GSAP, or with the Tailwind theme.
pnpm add @sweberdev/sigmoid