# Spring Playground

> Tune spring stiffness, damping and mass, see the response curve, settle time and overshoot, then copy a Motion (Framer Motion) transition or a CSS linear() easing.

Use it online: https://pixelpapa.com/tools/spring-playground

A spring animation is defined by stiffness (how hard it pulls toward the target), damping (how quickly it loses energy) and mass (how heavy it feels). The playground simulates the spring, plots its curve and samples it into a CSS linear() easing so you can use the same feel without JavaScript.

## Questions

### What do stiffness, damping and mass do in a spring animation?

Higher stiffness makes the spring faster and snappier, higher damping reduces bounce, and higher mass makes the motion slower to start and stop. A damping ratio below 1 overshoots; at 1 or above it settles without bouncing.

### Can I use a spring animation in plain CSS?

Yes. CSS has no spring timing function, but the linear() easing function can approximate any curve. This tool samples the simulated spring into a linear() value and a matching duration.