# vawe heavy: CSS linear() spring, stiffness 90 damping 22

> vawe heavy as a CSS linear() spring: stiffness 90, damping 22, settles in 1.345 s, no overshoot. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/vawe-heavy
Last updated: 2026-11-04

Stiffness 90, damping 22 and mass 1 give a damping ratio of 1.16, so the spring is overdamped. It settles to within 0.1% in 1.345 s. It never passes the end value.

It is the only overdamped house spring, so it never passes the end value.

| Measure | Value |
| --- | --- |
| Stiffness | 90 |
| Damping | 22 |
| Mass | 1 |
| Damping ratio | 1.16 (overdamped) |
| Settle time | 1.345 s |
| Overshoot | 0% |
| Crosses the end value | 0 |
| 50% of travel at | 0.194 s |
| 90% of travel at | 0.497 s |

## CSS linear()

```css
transition: translate 1345ms linear(0, 0.0052, 0.0192, 0.04, 0.0659, 0.0954, 0.1276, 0.1614, 0.1963, 0.2316, 0.2668, 0.3017, 0.336, 0.3694, 0.4019, 0.4332, 0.4633, 0.4923, 0.52, 0.5464, 0.5716, 0.5956, 0.6184, 0.6401, 0.6606, 0.68, 0.6984, 0.7158, 0.7322, 0.7477, 0.7624, 0.7762, 0.7893, 0.8016, 0.8132, 0.8241, 0.8344, 0.8441, 0.8533, 0.8619, 0.87, 0.8777, 0.8849, 0.8916, 0.898, 0.904, 0.9097, 0.915, 0.92, 0.9247, 0.9292, 0.9334, 0.9373, 0.941, 0.9445, 0.9478, 0.9508, 0.9537, 0.9565, 0.959, 0.9615, 0.9637, 0.9659, 0.9679, 0.9698, 0.9716, 0.9733, 0.9748, 0.9763, 0.9777, 0.979, 0.9803, 0.9814, 0.9825, 0.9836, 0.9845, 0.9854, 0.9863, 0.9871, 0.9879, 0.9886, 0.9893, 0.9899, 0.9905, 0.9911, 0.9916, 0.9921, 0.9926, 0.993, 0.9934, 0.9938, 0.9942, 0.9945, 0.9948, 0.9951, 0.9954, 0.9957, 0.9959, 0.9962, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9975, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9988, 0.9989, 0.9989, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1345, easing: 'linear(0, 0.0052, 0.0192, 0.04, 0.0659, 0.0954, 0.1276, 0.1614, 0.1963, 0.2316, 0.2668, 0.3017, 0.336, 0.3694, 0.4019, 0.4332, 0.4633, 0.4923, 0.52, 0.5464, 0.5716, 0.5956, 0.6184, 0.6401, 0.6606, 0.68, 0.6984, 0.7158, 0.7322, 0.7477, 0.7624, 0.7762, 0.7893, 0.8016, 0.8132, 0.8241, 0.8344, 0.8441, 0.8533, 0.8619, 0.87, 0.8777, 0.8849, 0.8916, 0.898, 0.904, 0.9097, 0.915, 0.92, 0.9247, 0.9292, 0.9334, 0.9373, 0.941, 0.9445, 0.9478, 0.9508, 0.9537, 0.9565, 0.959, 0.9615, 0.9637, 0.9659, 0.9679, 0.9698, 0.9716, 0.9733, 0.9748, 0.9763, 0.9777, 0.979, 0.9803, 0.9814, 0.9825, 0.9836, 0.9845, 0.9854, 0.9863, 0.9871, 0.9879, 0.9886, 0.9893, 0.9899, 0.9905, 0.9911, 0.9916, 0.9921, 0.9926, 0.993, 0.9934, 0.9938, 0.9942, 0.9945, 0.9948, 0.9951, 0.9954, 0.9957, 0.9959, 0.9962, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9975, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9988, 0.9989, 0.9989, 1)', fill: 'both' });
```

## In a vawe page

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

const { k, d } = SPRINGS.heavy;

// 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: 1345 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

SPRINGS.heavy = { k: 90, d: 22 }. core/motion/springs.js, SPRINGS.heavy.

## Related

- [react-spring slow](https://vawe.dev/springs/react-spring-slow)
- [SwiftUI .smooth](https://vawe.dev/springs/swiftui-smooth)
- [react-spring molasses](https://vawe.dev/springs/react-spring-molasses)
- [react-spring default](https://vawe.dev/springs/react-spring-default)
- [All spring presets](https://vawe.dev/springs)