Free tool
Spring Animation Generator
This spring animation generator lets you tune stiffness, damping and mass on a live button and toggle, then copy the same spring as Framer Motion, React Native Reanimated, SwiftUI or CSS code. It is free and runs in your browser.
Updated
import { motion } from 'framer-motion';
export function SpringButton() {
return (
<motion.button
whileTap={{ scale: 0.92 }}
transition={{ type: 'spring', stiffness: 420, damping: 26, mass: 1 }}
>
Spring button
</motion.button>
);
}How to use the Spring Animation Generator
- 1
Pick a starting feel
Leave the defaults (stiffness 420, damping 26, mass 1) for a snappy button, or drag the sliders.
- 2
Test it on real controls
Click the button and the toggle. Higher stiffness is faster, lower damping bounces more, more mass feels heavier.
- 3
Choose your platform
Switch the code tab to Framer Motion, React Native, SwiftUI or CSS.
- 4
Copy the code
Press Copy code and paste it into your component. The numbers match what you just tested.
Formats and limits
| Inputs | Stiffness 150–700, damping 10–50, mass 0.5–3 |
|---|---|
| Outputs | Framer Motion (React), React Native Reanimated withSpring, SwiftUI .spring(response:dampingFraction:), CSS linear() easing |
| Preview | A button press and a toggle, animated with the exact spring |
| Cost and sign-up | Free, no account |
| Where it runs | In your browser. Nothing is uploaded. |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Spring Animation Generator (this page) | Testing a spring on real controls, then copying it for React, React Native, SwiftUI or CSS | Free, no account, runs in your browser. |
| CSS Spring Easing Generator (kvin.me) | CSS-only springs set by perceived duration and bounce | Outputs a CSS linear() value. Good if you think in duration and bounce, not physics constants. |
| Linear easing generator | Turning any JavaScript easing into CSS linear() | You write the easing as code. Its default example is a spring with mass, stiffness and damping. |
| Figma prototype springs | Springs inside a Figma prototype | Gentle, Quick, Bouncy and Slow presets, or custom stiffness, damping and mass. It does not export code. |
Frequently asked questions
What do stiffness, damping and mass do in a spring animation?
Stiffness is how hard the spring pulls toward its target, so higher values move faster. Damping is friction, so lower values bounce more. Mass is the weight of the object, so higher values feel slower and heavier.
What spring values work well for UI buttons?
For a press or toggle, stiffness around 400 to 520 with damping 22 to 28 and mass 1 gives a quick response with a small overshoot. For large panels or sheets, lower the stiffness to 200 to 300.
Can I use a spring animation in plain CSS?
Yes. Use the CSS tab. It samples the spring into a linear() easing and gives you the duration to pair with it. linear() works in Chrome 113+, Firefox 112+ and Safari 17.2+. A CSS spring cannot keep velocity if the animation is interrupted, a JavaScript spring can.
How do these values map to SwiftUI?
SwiftUI springs use response and dampingFraction. The generator converts for you: response is 2π divided by the square root of stiffness over mass, and dampingFraction is damping divided by 2 times the square root of stiffness times mass.
Is the Framer Motion code the same spring I see in the preview?
Yes. The preview uses Framer Motion with type "spring" and the same stiffness, damping and mass you set.