# SwiftUI .bouncy: CSS linear() spring, stiffness 157.91 damping 17.59

> SwiftUI .bouncy as a CSS linear() spring: stiffness 157.91, damping 17.59, settles in 0.82 s, overshoots 4.6%. Copy the CSS and the Web Animations line.

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

Stiffness 157.91, damping 17.59 and mass 1 give a damping ratio of 0.7, so the spring is underdamped. It settles to within 0.1% in 0.82 s. It passes the end value by up to 4.6% at 0.35 s and crosses it 2 times.

Its base bounce of 0.3 gives a damping fraction of 0.7.

| Measure | Value |
| --- | --- |
| Stiffness | 157.91 |
| Damping | 17.59 |
| Mass | 1 |
| Damping ratio | 0.7 (underdamped) |
| Settle time | 0.82 s |
| Overshoot | 4.6% |
| Crosses the end value | 2 |
| 50% of travel at | 0.114 s |
| 90% of travel at | 0.21 s |

## CSS linear()

```css
transition: translate 820ms linear(0, 0.0078, 0.0294, 0.0621, 0.1036, 0.1519, 0.2051, 0.2615, 0.3198, 0.3789, 0.4376, 0.4951, 0.5508, 0.6041, 0.6547, 0.7021, 0.7462, 0.7869, 0.8241, 0.8578, 0.8881, 0.9152, 0.939, 0.9598, 0.9779, 0.9932, 1.0062, 1.0169, 1.0256, 1.0324, 1.0377, 1.0415, 1.044, 1.0455, 1.046, 1.0458, 1.0449, 1.0434, 1.0416, 1.0394, 1.037, 1.0344, 1.0317, 1.029, 1.0263, 1.0236, 1.0211, 1.0186, 1.0162, 1.014, 1.012, 1.0101, 1.0083, 1.0068, 1.0053, 1.0041, 1.003, 1.002, 1.0011, 1.0004, 0.9998, 0.9993, 0.9989, 0.9985, 0.9983, 0.9981, 0.998, 0.9979, 0.9979, 0.9979, 0.9979, 0.998, 0.9981, 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: 820, easing: 'linear(0, 0.0078, 0.0294, 0.0621, 0.1036, 0.1519, 0.2051, 0.2615, 0.3198, 0.3789, 0.4376, 0.4951, 0.5508, 0.6041, 0.6547, 0.7021, 0.7462, 0.7869, 0.8241, 0.8578, 0.8881, 0.9152, 0.939, 0.9598, 0.9779, 0.9932, 1.0062, 1.0169, 1.0256, 1.0324, 1.0377, 1.0415, 1.044, 1.0455, 1.046, 1.0458, 1.0449, 1.0434, 1.0416, 1.0394, 1.037, 1.0344, 1.0317, 1.029, 1.0263, 1.0236, 1.0211, 1.0186, 1.0162, 1.014, 1.012, 1.0101, 1.0083, 1.0068, 1.0053, 1.0041, 1.003, 1.002, 1.0011, 1.0004, 0.9998, 0.9993, 0.9989, 0.9985, 0.9983, 0.9981, 0.998, 0.9979, 0.9979, 0.9979, 0.9979, 0.998, 0.9981, 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 = 157.91, d = 17.59;

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

.bouncy: duration 0.5, base bounce 0.3 (Apple: "higher amount of bounce"). SwiftUI documentation read on 2026-11-03, Animation.bouncy(duration:extraBounce:) (https://developer.apple.com/documentation/swiftui/animation/bouncy(duration:extrabounce:)). Conversion: stiffness = (2 pi / response)^2, damping = 4 pi x dampingFraction / response, with mass 1. The duration-and-bounce forms map to response = duration and dampingFraction = 1 - bounce, the same bounce mapping Motion documents "as SwiftUI does". Apple states bounce 0 is critically damped and bounce 1 is undamped.

## Related

- [Material 3 Expressive slow spatial](https://vawe.dev/springs/material-expressive-slow-spatial)
- [react-spring gentle](https://vawe.dev/springs/react-spring-gentle)
- [SwiftUI spring()](https://vawe.dev/springs/swiftui-spring)
- [react-spring stiff](https://vawe.dev/springs/react-spring-stiff)
- [All spring presets](https://vawe.dev/springs)