# Compose MediumBouncy with StiffnessLow: stiffness 200, damping 14.14 spring

> Compose MediumBouncy with StiffnessLow as a CSS linear() spring: stiffness 200, damping 14.14, settles in 0.9 s. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/compose-medium-bouncy-low
Last updated: 2026-11-04

Stiffness 200, damping 14.14 and mass 1 give a damping ratio of 0.5, so the spring is underdamped. It settles to within 0.1% in 0.9 s. It passes the end value by up to 16.3% at 0.256 s and crosses it 3 times.

Both constants come from the Spring object: a damping ratio of 0.5 and the low stiffness, 200.

| Measure | Value |
| --- | --- |
| Stiffness | 200 |
| Damping | 14.14 |
| Mass | 1 |
| Damping ratio | 0.5 (underdamped) |
| Settle time | 0.9 s |
| Overshoot | 16.3% |
| Crosses the end value | 3 |
| 50% of travel at | 0.092 s |
| 90% of travel at | 0.151 s |

## CSS linear()

```css
transition: translate 900ms linear(0, 0.0054, 0.0209, 0.0453, 0.0774, 0.1161, 0.1603, 0.2091, 0.2613, 0.3162, 0.3729, 0.4305, 0.4884, 0.546, 0.6026, 0.6577, 0.711, 0.7619, 0.8103, 0.8558, 0.8983, 0.9376, 0.9736, 1.0063, 1.0356, 1.0616, 1.0843, 1.1038, 1.1203, 1.1338, 1.1445, 1.1526, 1.1583, 1.1617, 1.1631, 1.1625, 1.1603, 1.1566, 1.1516, 1.1455, 1.1384, 1.1306, 1.1222, 1.1133, 1.1041, 1.0948, 1.0853, 1.0759, 1.0666, 1.0576, 1.0488, 1.0405, 1.0325, 1.025, 1.0179, 1.0114, 1.0054, 1, 0.9951, 0.9908, 0.9869, 0.9837, 0.9809, 0.9786, 0.9767, 0.9753, 0.9743, 0.9737, 0.9734, 0.9735, 0.9738, 0.9743, 0.9751, 0.9761, 0.9772, 0.9784, 0.9798, 0.9812, 0.9827, 0.9842, 0.9858, 0.9873, 0.9888, 0.9903, 0.9918, 0.9931, 0.9944, 0.9957, 0.9969, 0.9979, 0.9989, 0.9998, 1.0006, 1.0014, 1.002, 1.0026, 1.003, 1.0034, 1.0037, 1.004, 1.0042, 1.0043, 1.0043, 1.0043, 1.0043, 1.0042, 1.0041, 1.0039, 1.0038, 1.0036, 1.0033, 1.0031, 1.0029, 1.0026, 1.0024, 1.0021, 1.0019, 1.0016, 1.0014, 1.0012, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 900, easing: 'linear(0, 0.0054, 0.0209, 0.0453, 0.0774, 0.1161, 0.1603, 0.2091, 0.2613, 0.3162, 0.3729, 0.4305, 0.4884, 0.546, 0.6026, 0.6577, 0.711, 0.7619, 0.8103, 0.8558, 0.8983, 0.9376, 0.9736, 1.0063, 1.0356, 1.0616, 1.0843, 1.1038, 1.1203, 1.1338, 1.1445, 1.1526, 1.1583, 1.1617, 1.1631, 1.1625, 1.1603, 1.1566, 1.1516, 1.1455, 1.1384, 1.1306, 1.1222, 1.1133, 1.1041, 1.0948, 1.0853, 1.0759, 1.0666, 1.0576, 1.0488, 1.0405, 1.0325, 1.025, 1.0179, 1.0114, 1.0054, 1, 0.9951, 0.9908, 0.9869, 0.9837, 0.9809, 0.9786, 0.9767, 0.9753, 0.9743, 0.9737, 0.9734, 0.9735, 0.9738, 0.9743, 0.9751, 0.9761, 0.9772, 0.9784, 0.9798, 0.9812, 0.9827, 0.9842, 0.9858, 0.9873, 0.9888, 0.9903, 0.9918, 0.9931, 0.9944, 0.9957, 0.9969, 0.9979, 0.9989, 0.9998, 1.0006, 1.0014, 1.002, 1.0026, 1.003, 1.0034, 1.0037, 1.004, 1.0042, 1.0043, 1.0043, 1.0043, 1.0043, 1.0042, 1.0041, 1.0039, 1.0038, 1.0036, 1.0033, 1.0031, 1.0029, 1.0026, 1.0024, 1.0021, 1.0019, 1.0016, 1.0014, 1.0012, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 200, d = 14.14;

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

spring(dampingRatio = Spring.DampingRatioMediumBouncy (0.5), stiffness = Spring.StiffnessLow (200)). androidx main at 9adbcd8 (compose animation-core 1.14.0-alpha01), Spring.DampingRatioMediumBouncy, Spring.StiffnessLow (https://github.com/androidx/androidx/blob/androidx-main/compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/VectorizedAnimationSpec.kt). Conversion: Stiffness is used as it is with mass 1 (SpringSimulation takes the natural frequency as sqrt(stiffness)). damping = 2 x dampingRatio x sqrt(stiffness), the same c = 2 x naturalFreq x dampingRatio that SpringSimulation.getAcceleration uses.

## Related

- [react-spring wobbly](https://vawe.dev/springs/react-spring-wobbly)
- [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)