Spring Animation Parameter Generator

Features

• Adjustable mass, stiffness, damping and initial velocity
• Five official presets: gentle, wobbly, stiff, slow and molasses
• Generates Framer Motion transition={{ type: "spring" }} code
• Samples the spring response at 60 points and writes a CSS linear() easing
• Also gives the sampling duration (the time the spring naturally takes to settle)
• ⚠️ Reports the damping ratio ζ, the natural frequency ω0 and whether it overshoots
• ⚠️ Fixed-step semi-implicit Euler integration that errors out instead of emitting NaN
• The block in the live preview keeps bouncing, so the overshoot is plain to see
• Everything runs in your browser and nothing is uploaded

How to use

1. Pick a preset, or set mass, stiffness, damping and velocity yourself
2. Read the damping ratio and the overshoot verdict below
3. Copy the Framer Motion block or the CSS with the linear() easing
4. Watch the block bounce in the preview to feel the overshoot

FAQ

What is the damping ratio ζ, and how does it decide overshoot?

`ζ = c / (2·√(m·k))`, where c is damping, m is mass and k is stiffness. ζ < 1 is underdamped, so the spring goes past the target and comes back (overshoot); ζ = 1 is critically damped, which just avoids overshoot and returns fastest; ζ > 1 is overdamped, no overshoot but a slower return. It depends only on those three numbers, not on the initial velocity (velocity only shapes the early part).

Why use linear() in CSS?

Because among CSS easing functions only `linear()` can set the progress point by point, which is what lets it express overshoot — going past the target and coming back. A `cubic-bezier` can exceed 0 to 1 on its vertical axis too, but matching a spring response closely is hard. Sampling the spring at 60 points is the closest CSS gets today. The price is that it is fixed length, so the natural settle time is given alongside it.

Why does setting damping to zero raise an error?

Because a spring with zero damping never stops — it oscillates at the same amplitude forever, so there is no settled moment and no finite duration to sample. No real interface should have that animation either (the user would just watch it shake). Raise the damping a little so that it settles.

How do I use these parameters in Framer Motion?

Use the generated line directly: `transition={{ type: "spring", mass: ..., stiffness: ..., damping: ..., velocity: ... }}`. The Framer Motion spring is exactly this physical model, and `velocity` is the initial speed when the animation starts (common when something is flung by a drag). The preset names (gentle, wobbly and so on) are the official sets; choosing one means the four numbers above do not take part.