# react-spring wobbly: CSS linear() spring, stiffness 180 damping 12

> react-spring wobbly as a CSS linear() spring: stiffness 180, damping 12, settles in 1.14 s, overshoots 20.8%. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/react-spring-wobbly
Last updated: 2026-11-04

Stiffness 180, damping 12 and mass 1 give a damping ratio of 0.447, so the spring is underdamped. It settles to within 0.1% in 1.14 s. It passes the end value by up to 20.8% at 0.262 s and crosses it 4 times.

Of the six react-spring presets it overshoots the most.

| Measure | Value |
| --- | --- |
| Stiffness | 180 |
| Damping | 12 |
| Mass | 1 |
| Damping ratio | 0.447 (underdamped) |
| Settle time | 1.14 s |
| Overshoot | 20.8% |
| Crosses the end value | 4 |
| 50% of travel at | 0.095 s |
| 90% of travel at | 0.151 s |

## CSS linear()

```css
transition: translate 1140ms linear(0, 0.0078, 0.03, 0.0647, 0.1099, 0.164, 0.225, 0.2914, 0.3614, 0.4337, 0.5069, 0.5798, 0.6512, 0.7204, 0.7863, 0.8484, 0.9062, 0.9591, 1.007, 1.0497, 1.0869, 1.1188, 1.1455, 1.1671, 1.1837, 1.1958, 1.2035, 1.2073, 1.2076, 1.2046, 1.1988, 1.1905, 1.1803, 1.1683, 1.1551, 1.1409, 1.1261, 1.111, 1.0958, 1.0807, 1.0661, 1.052, 1.0386, 1.0261, 1.0145, 1.004, 0.9945, 0.9861, 0.9789, 0.9727, 0.9676, 0.9636, 0.9606, 0.9585, 0.9572, 0.9568, 0.9571, 0.9579, 0.9594, 0.9613, 0.9636, 0.9662, 0.969, 0.972, 0.9752, 0.9783, 0.9815, 0.9846, 0.9876, 0.9904, 0.9931, 0.9957, 0.998, 1.0001, 1.0019, 1.0036, 1.005, 1.0062, 1.0071, 1.0079, 1.0084, 1.0088, 1.0089, 1.009, 1.0089, 1.0086, 1.0083, 1.0078, 1.0073, 1.0068, 1.0062, 1.0055, 1.0049, 1.0042, 1.0036, 1.0029, 1.0023, 1.0017, 1.0012, 1.0007, 1.0002, 0.9998, 0.9994, 0.9991, 0.9988, 0.9986, 0.9984, 0.9983, 0.9982, 0.9982, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9988, 0.9989, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1140, easing: 'linear(0, 0.0078, 0.03, 0.0647, 0.1099, 0.164, 0.225, 0.2914, 0.3614, 0.4337, 0.5069, 0.5798, 0.6512, 0.7204, 0.7863, 0.8484, 0.9062, 0.9591, 1.007, 1.0497, 1.0869, 1.1188, 1.1455, 1.1671, 1.1837, 1.1958, 1.2035, 1.2073, 1.2076, 1.2046, 1.1988, 1.1905, 1.1803, 1.1683, 1.1551, 1.1409, 1.1261, 1.111, 1.0958, 1.0807, 1.0661, 1.052, 1.0386, 1.0261, 1.0145, 1.004, 0.9945, 0.9861, 0.9789, 0.9727, 0.9676, 0.9636, 0.9606, 0.9585, 0.9572, 0.9568, 0.9571, 0.9579, 0.9594, 0.9613, 0.9636, 0.9662, 0.969, 0.972, 0.9752, 0.9783, 0.9815, 0.9846, 0.9876, 0.9904, 0.9931, 0.9957, 0.998, 1.0001, 1.0019, 1.0036, 1.005, 1.0062, 1.0071, 1.0079, 1.0084, 1.0088, 1.0089, 1.009, 1.0089, 1.0086, 1.0083, 1.0078, 1.0073, 1.0068, 1.0062, 1.0055, 1.0049, 1.0042, 1.0036, 1.0029, 1.0023, 1.0017, 1.0012, 1.0007, 1.0002, 0.9998, 0.9994, 0.9991, 0.9988, 0.9986, 0.9984, 0.9983, 0.9982, 0.9982, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9988, 0.9989, 1)', fill: 'both' });
```

## In a vawe page

```js
import { spring, springDuration, springLinear } from '../../core/motion/springs.js';

const k = 180, d = 12;

// per-frame code (window.seek, vawe.onFrame): t is seconds since the move starts
const x = 240 * spring(t, k, d);

// CSS and Web Animations: 1140 ms, the linear() string above
el.animate(
  { translate: ['0 0', '240px 0'] },
  { duration: springDuration(k, d) * 1000, easing: springLinear(k, d), fill: 'both' },
);
```

## Source of the numbers

config.wobbly = { tension: 180, friction: 12 }. @react-spring/core 10.1.2, packages/core/src/constants.ts, const config (https://github.com/pmndrs/react-spring/blob/main/packages/core/src/constants.ts). Conversion: Stiffness is tension and damping is friction, with mass 1 (the default). The physics loop in the same package, acceleration = (-tension x displacement - friction x velocity) / mass, is the spring that spring() in springs.js solves.

## Related

- [Compose MediumBouncy with StiffnessLow](https://vawe.dev/springs/compose-medium-bouncy-low)
- [vawe playful](https://vawe.dev/springs/vawe-playful)
- [react-spring stiff](https://vawe.dev/springs/react-spring-stiff)
- [Material 3 Expressive default spatial](https://vawe.dev/springs/material-expressive-default-spatial)
- [All spring presets](https://vawe.dev/springs)