Spring animation presets as CSS
25 springs from react-spring, Motion, SwiftUI, Jetpack Compose, Material 3 and vawe. Each page has the stiffness and damping read from the library’s own source, the settle time, the overshoot, a live demo and a linear() string to copy.
Stiffness, damping and mass
A spring pulls a value toward its target. Stiffness is how hard it pulls: a higher number is a faster move. Damping is the friction that drains speed: a low number lets the value swing past the target and back, a high number stops the swing. Mass is how heavy the value is. Every preset here has mass 1; if a library sets another mass, divide its stiffness and damping by it.
The damping ratio, d / (2 x sqrt(k)), says which kind of spring it is. Under 1 it overshoots. At 1 it is critically damped, the fastest settle with no overshoot. Over 1 it creeps in. The settle time on each page is the last moment the spring is more than 0.1% away from the end value.
A CSS transition cannot take stiffness and damping. The pages turn each spring into a linear() easing and a duration. In a vawe page, spring(t, k, d) in core/motion/springs.js returns the same curve for any time.
All presets
vawe house springs
The four springs in SPRINGS, from core/motion/springs.js. Page code reads them with spring(t, k, d).
- vawe snappy
Stiffness 400, damping 32.
- vawe default
Stiffness 170, damping 26.
- vawe heavy
Stiffness 90, damping 22.
- vawe playful
Stiffness 220, damping 12.
react-spring
The six presets of the config object in react-spring.
- react-spring default
Stiffness 170, damping 26.
- react-spring gentle
Stiffness 120, damping 14.
- react-spring wobbly
Stiffness 180, damping 12.
- react-spring stiff
Stiffness 210, damping 20.
- react-spring slow
Stiffness 280, damping 60.
- react-spring molasses
Stiffness 280, damping 120.
Motion (Framer Motion)
The spring numbers Motion uses when you do not set them.
- Motion default spring
Stiffness 100, damping 10.
- Motion x, y and rotate default
Stiffness 500, damping 25.
- Motion scale default
Stiffness 550, damping 30.
SwiftUI
Apple spring animations, converted from response and damping fraction to stiffness and damping.
- SwiftUI spring()
Stiffness 157.91, damping 20.73.
- SwiftUI .smooth
Stiffness 157.91, damping 25.13.
- SwiftUI .snappy
Stiffness 157.91, damping 21.36.
- SwiftUI .bouncy
Stiffness 157.91, damping 17.59.
Jetpack Compose
spring() in Compose, from the constants of the Spring object.
- Compose spring() default
Stiffness 1500, damping 77.46.
- Compose NoBouncy with StiffnessMediumLow
Stiffness 400, damping 40.
- Compose MediumBouncy with StiffnessLow
Stiffness 200, damping 14.14.
- Compose HighBouncy with StiffnessMediumLow
Stiffness 400, damping 8.
Material 3
The spatial springs of the Material 3 motion schemes in Compose.
- Material 3 Expressive fast spatial
Stiffness 800, damping 33.94.
- Material 3 Expressive default spatial
Stiffness 380, damping 31.19.
- Material 3 Expressive slow spatial
Stiffness 200, damping 22.63.
- Material 3 Standard default spatial
Stiffness 700, damping 47.62.
Compare the numbers
Every preset from the least to the most overshoot.
react-spring default and vawe default are the same spring. SwiftUI and Compose values are converted to stiffness and damping with the formula on each page. For an easing with no spring, see the easing functions.