# vawe playful: CSS linear() spring, stiffness 220 damping 12

> vawe playful as a CSS linear() spring: stiffness 220, damping 12, settles in 1.04 s, overshoots 24.9%. Copy the CSS and the Web Animations line.

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

Stiffness 220, damping 12 and mass 1 give a damping ratio of 0.405, so the spring is underdamped. It settles to within 0.1% in 1.04 s. It passes the end value by up to 24.9% at 0.232 s and crosses it 4 times.

It is the house spring that overshoots most.

| Measure | Value |
| --- | --- |
| Stiffness | 220 |
| Damping | 12 |
| Mass | 1 |
| Damping ratio | 0.405 (underdamped) |
| Settle time | 1.04 s |
| Overshoot | 24.9% |
| Crosses the end value | 4 |
| 50% of travel at | 0.084 s |
| 90% of travel at | 0.132 s |

## CSS linear()

```css
transition: translate 1040ms linear(0, 0.008, 0.0307, 0.0664, 0.1132, 0.1692, 0.2328, 0.3021, 0.3755, 0.4514, 0.5284, 0.6052, 0.6806, 0.7536, 0.8232, 0.8887, 0.9495, 1.0051, 1.0551, 1.0993, 1.1376, 1.1699, 1.1964, 1.2172, 1.2325, 1.2427, 1.2481, 1.249, 1.246, 1.2394, 1.2297, 1.2173, 1.2028, 1.1865, 1.1689, 1.1504, 1.1314, 1.1122, 1.0931, 1.0745, 1.0565, 1.0394, 1.0234, 1.0086, 0.9951, 0.9831, 0.9725, 0.9633, 0.9557, 0.9495, 0.9447, 0.9412, 0.939, 0.938, 0.9381, 0.9391, 0.941, 0.9436, 0.9468, 0.9506, 0.9547, 0.9592, 0.9638, 0.9686, 0.9734, 0.9781, 0.9827, 0.9871, 0.9913, 0.9952, 0.9988, 1.0021, 1.005, 1.0075, 1.0097, 1.0115, 1.013, 1.0141, 1.0148, 1.0153, 1.0155, 1.0154, 1.0151, 1.0146, 1.0139, 1.013, 1.012, 1.011, 1.0099, 1.0087, 1.0075, 1.0063, 1.0051, 1.004, 1.0029, 1.0019, 1.0009, 1.0001, 0.9993, 0.9986, 0.998, 0.9974, 0.997, 0.9967, 0.9964, 0.9963, 0.9962, 0.9961, 0.9962, 0.9963, 0.9964, 0.9966, 0.9968, 0.9971, 0.9973, 0.9976, 0.9979, 0.9982, 0.9985, 0.9988, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1040, easing: 'linear(0, 0.008, 0.0307, 0.0664, 0.1132, 0.1692, 0.2328, 0.3021, 0.3755, 0.4514, 0.5284, 0.6052, 0.6806, 0.7536, 0.8232, 0.8887, 0.9495, 1.0051, 1.0551, 1.0993, 1.1376, 1.1699, 1.1964, 1.2172, 1.2325, 1.2427, 1.2481, 1.249, 1.246, 1.2394, 1.2297, 1.2173, 1.2028, 1.1865, 1.1689, 1.1504, 1.1314, 1.1122, 1.0931, 1.0745, 1.0565, 1.0394, 1.0234, 1.0086, 0.9951, 0.9831, 0.9725, 0.9633, 0.9557, 0.9495, 0.9447, 0.9412, 0.939, 0.938, 0.9381, 0.9391, 0.941, 0.9436, 0.9468, 0.9506, 0.9547, 0.9592, 0.9638, 0.9686, 0.9734, 0.9781, 0.9827, 0.9871, 0.9913, 0.9952, 0.9988, 1.0021, 1.005, 1.0075, 1.0097, 1.0115, 1.013, 1.0141, 1.0148, 1.0153, 1.0155, 1.0154, 1.0151, 1.0146, 1.0139, 1.013, 1.012, 1.011, 1.0099, 1.0087, 1.0075, 1.0063, 1.0051, 1.004, 1.0029, 1.0019, 1.0009, 1.0001, 0.9993, 0.9986, 0.998, 0.9974, 0.997, 0.9967, 0.9964, 0.9963, 0.9962, 0.9961, 0.9962, 0.9963, 0.9964, 0.9966, 0.9968, 0.9971, 0.9973, 0.9976, 0.9979, 0.9982, 0.9985, 0.9988, 1)', fill: 'both' });
```

## In a vawe page

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

const { k, d } = SPRINGS.playful;

// 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: 1040 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.playful = { k: 220, d: 12 }. core/motion/springs.js, SPRINGS.playful.

## Related

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