# react-spring gentle: CSS linear() spring, stiffness 120 damping 14

> react-spring gentle as a CSS linear() spring: stiffness 120, damping 14, settles in 0.945 s, overshoots 7.4%. Copy the CSS and the Web Animations line.

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

Stiffness 120, damping 14 and mass 1 give a damping ratio of 0.639, so the spring is underdamped. It settles to within 0.1% in 0.945 s. It passes the end value by up to 7.4% at 0.373 s and crosses it 2 times.

Its stiffness is lower than default (120 against 170) and its damping is about half (14 against 26).

| Measure | Value |
| --- | --- |
| Stiffness | 120 |
| Damping | 14 |
| Mass | 1 |
| Damping ratio | 0.639 (underdamped) |
| Settle time | 0.945 s |
| Overshoot | 7.4% |
| Crosses the end value | 2 |
| 50% of travel at | 0.127 s |
| 90% of travel at | 0.224 s |

## CSS linear()

```css
transition: translate 945ms linear(0, 0.0079, 0.0299, 0.0635, 0.1064, 0.1566, 0.2121, 0.2712, 0.3326, 0.395, 0.4571, 0.5181, 0.5773, 0.634, 0.6876, 0.7379, 0.7846, 0.8275, 0.8665, 0.9016, 0.9329, 0.9604, 0.9844, 1.0049, 1.0222, 1.0366, 1.0482, 1.0573, 1.0641, 1.0689, 1.0719, 1.0733, 1.0734, 1.0724, 1.0704, 1.0676, 1.0642, 1.0603, 1.0561, 1.0516, 1.0471, 1.0425, 1.038, 1.0335, 1.0292, 1.0252, 1.0213, 1.0177, 1.0144, 1.0114, 1.0087, 1.0062, 1.004, 1.0021, 1.0005, 0.9991, 0.9979, 0.9969, 0.9961, 0.9955, 0.9951, 0.9948, 0.9947, 0.9946, 0.9946, 0.9947, 0.9949, 0.9951, 0.9954, 0.9957, 0.996, 0.9963, 0.9967, 0.997, 0.9974, 0.9977, 0.998, 0.9983, 0.9985, 0.9988, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 945, easing: 'linear(0, 0.0079, 0.0299, 0.0635, 0.1064, 0.1566, 0.2121, 0.2712, 0.3326, 0.395, 0.4571, 0.5181, 0.5773, 0.634, 0.6876, 0.7379, 0.7846, 0.8275, 0.8665, 0.9016, 0.9329, 0.9604, 0.9844, 1.0049, 1.0222, 1.0366, 1.0482, 1.0573, 1.0641, 1.0689, 1.0719, 1.0733, 1.0734, 1.0724, 1.0704, 1.0676, 1.0642, 1.0603, 1.0561, 1.0516, 1.0471, 1.0425, 1.038, 1.0335, 1.0292, 1.0252, 1.0213, 1.0177, 1.0144, 1.0114, 1.0087, 1.0062, 1.004, 1.0021, 1.0005, 0.9991, 0.9979, 0.9969, 0.9961, 0.9955, 0.9951, 0.9948, 0.9947, 0.9946, 0.9946, 0.9947, 0.9949, 0.9951, 0.9954, 0.9957, 0.996, 0.9963, 0.9967, 0.997, 0.9974, 0.9977, 0.998, 0.9983, 0.9985, 0.9988, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 120, d = 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: 945 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.gentle = { tension: 120, friction: 14 }. @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

- [SwiftUI .bouncy](https://vawe.dev/springs/swiftui-bouncy)
- [SwiftUI spring()](https://vawe.dev/springs/swiftui-spring)
- [Motion default spring](https://vawe.dev/springs/motion-default)
- [SwiftUI .snappy](https://vawe.dev/springs/swiftui-snappy)
- [All spring presets](https://vawe.dev/springs)