# react-spring slow: CSS linear() spring, stiffness 280 damping 60

> react-spring slow as a CSS linear() spring: stiffness 280, damping 60, settles in 1.375 s, no overshoot. Copy the CSS and the Web Animations line.

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

Stiffness 280, damping 60 and mass 1 give a damping ratio of 1.793, so the spring is overdamped. It settles to within 0.1% in 1.375 s. It never passes the end value.

Its tension (280) is the same as molasses; only the friction differs (60 against 120).

| Measure | Value |
| --- | --- |
| Stiffness | 280 |
| Damping | 60 |
| Mass | 1 |
| Damping ratio | 1.793 (overdamped) |
| Settle time | 1.375 s |
| Overshoot | 0% |
| Crosses the end value | 0 |
| 50% of travel at | 0.156 s |
| 90% of travel at | 0.471 s |

## CSS linear()

```css
transition: translate 1375ms linear(0, 0.0041, 0.0148, 0.03, 0.0483, 0.0687, 0.0904, 0.1128, 0.1357, 0.1585, 0.1813, 0.2038, 0.226, 0.2477, 0.269, 0.2897, 0.3099, 0.3297, 0.3488, 0.3675, 0.3857, 0.4033, 0.4205, 0.4371, 0.4533, 0.469, 0.4843, 0.4992, 0.5136, 0.5276, 0.5412, 0.5544, 0.5672, 0.5797, 0.5918, 0.6035, 0.615, 0.6261, 0.6368, 0.6473, 0.6574, 0.6673, 0.6769, 0.6862, 0.6952, 0.704, 0.7125, 0.7208, 0.7288, 0.7367, 0.7442, 0.7516, 0.7588, 0.7657, 0.7724, 0.779, 0.7854, 0.7915, 0.7975, 0.8034, 0.809, 0.8145, 0.8199, 0.8251, 0.8301, 0.835, 0.8397, 0.8444, 0.8488, 0.8532, 0.8574, 0.8615, 0.8655, 0.8694, 0.8732, 0.8768, 0.8804, 0.8838, 0.8871, 0.8904, 0.8936, 0.8966, 0.8996, 0.9025, 0.9053, 0.908, 0.9107, 0.9132, 0.9157, 0.9182, 0.9205, 0.9228, 0.925, 0.9272, 0.9293, 0.9313, 0.9333, 0.9352, 0.9371, 0.9389, 0.9407, 0.9424, 0.944, 0.9456, 0.9472, 0.9487, 0.9502, 0.9516, 0.953, 0.9544, 0.9557, 0.957, 0.9582, 0.9594, 0.9606, 0.9617, 0.9628, 0.9639, 0.9649, 0.9659, 0.9669, 0.9679, 0.9688, 0.9697, 0.9706, 0.9714, 0.9722, 0.973, 0.9738, 0.9746, 0.9753, 0.976, 0.9767, 0.9774, 0.978, 0.9787, 0.9793, 0.9799, 0.9805, 0.981, 0.9816, 0.9821, 0.9826, 0.9831, 0.9836, 0.9841, 0.9845, 0.985, 0.9854, 0.9858, 0.9862, 0.9866, 0.987, 0.9874, 0.9878, 0.9881, 0.9884, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9909, 0.9911, 0.9914, 0.9916, 0.9919, 0.9921, 0.9923, 0.9925, 0.9928, 0.993, 0.9932, 0.9934, 0.9936, 0.9937, 0.9939, 0.9941, 0.9943, 0.9944, 0.9946, 0.9948, 0.9949, 0.995, 0.9952, 0.9953, 0.9955, 0.9956, 0.9957, 0.9958, 0.996, 0.9961, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.997, 0.9971, 0.9972, 0.9972, 0.9973, 0.9974, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9987, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.9989, 0.999, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1375, easing: 'linear(0, 0.0041, 0.0148, 0.03, 0.0483, 0.0687, 0.0904, 0.1128, 0.1357, 0.1585, 0.1813, 0.2038, 0.226, 0.2477, 0.269, 0.2897, 0.3099, 0.3297, 0.3488, 0.3675, 0.3857, 0.4033, 0.4205, 0.4371, 0.4533, 0.469, 0.4843, 0.4992, 0.5136, 0.5276, 0.5412, 0.5544, 0.5672, 0.5797, 0.5918, 0.6035, 0.615, 0.6261, 0.6368, 0.6473, 0.6574, 0.6673, 0.6769, 0.6862, 0.6952, 0.704, 0.7125, 0.7208, 0.7288, 0.7367, 0.7442, 0.7516, 0.7588, 0.7657, 0.7724, 0.779, 0.7854, 0.7915, 0.7975, 0.8034, 0.809, 0.8145, 0.8199, 0.8251, 0.8301, 0.835, 0.8397, 0.8444, 0.8488, 0.8532, 0.8574, 0.8615, 0.8655, 0.8694, 0.8732, 0.8768, 0.8804, 0.8838, 0.8871, 0.8904, 0.8936, 0.8966, 0.8996, 0.9025, 0.9053, 0.908, 0.9107, 0.9132, 0.9157, 0.9182, 0.9205, 0.9228, 0.925, 0.9272, 0.9293, 0.9313, 0.9333, 0.9352, 0.9371, 0.9389, 0.9407, 0.9424, 0.944, 0.9456, 0.9472, 0.9487, 0.9502, 0.9516, 0.953, 0.9544, 0.9557, 0.957, 0.9582, 0.9594, 0.9606, 0.9617, 0.9628, 0.9639, 0.9649, 0.9659, 0.9669, 0.9679, 0.9688, 0.9697, 0.9706, 0.9714, 0.9722, 0.973, 0.9738, 0.9746, 0.9753, 0.976, 0.9767, 0.9774, 0.978, 0.9787, 0.9793, 0.9799, 0.9805, 0.981, 0.9816, 0.9821, 0.9826, 0.9831, 0.9836, 0.9841, 0.9845, 0.985, 0.9854, 0.9858, 0.9862, 0.9866, 0.987, 0.9874, 0.9878, 0.9881, 0.9884, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9909, 0.9911, 0.9914, 0.9916, 0.9919, 0.9921, 0.9923, 0.9925, 0.9928, 0.993, 0.9932, 0.9934, 0.9936, 0.9937, 0.9939, 0.9941, 0.9943, 0.9944, 0.9946, 0.9948, 0.9949, 0.995, 0.9952, 0.9953, 0.9955, 0.9956, 0.9957, 0.9958, 0.996, 0.9961, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.997, 0.9971, 0.9972, 0.9972, 0.9973, 0.9974, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9987, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.9989, 0.999, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 280, d = 60;

// 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: 1375 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.slow = { tension: 280, friction: 60 }. @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

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