# react-spring molasses: CSS linear() spring, stiffness 280 damping 120

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

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

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

It is the slowest preset in this set, 2.915 s. Its damping ratio is 3.59, so the extra friction holds the spring back.

| Measure | Value |
| --- | --- |
| Stiffness | 280 |
| Damping | 120 |
| Mass | 1 |
| Damping ratio | 3.586 (overdamped) |
| Settle time | 2.915 s |
| Overshoot | 0% |
| Crosses the end value | 0 |
| 50% of travel at | 0.3 s |
| 90% of travel at | 0.976 s |

## CSS linear()

```css
transition: translate 2915ms linear(0, 0.0134, 0.0379, 0.0644, 0.0909, 0.1167, 0.1419, 0.1664, 0.1901, 0.2132, 0.2356, 0.2574, 0.2786, 0.2991, 0.3191, 0.3385, 0.3574, 0.3757, 0.3935, 0.4108, 0.4276, 0.4439, 0.4597, 0.4751, 0.4901, 0.5046, 0.5187, 0.5324, 0.5458, 0.5587, 0.5713, 0.5835, 0.5954, 0.6069, 0.6181, 0.629, 0.6396, 0.6498, 0.6598, 0.6695, 0.6789, 0.6881, 0.697, 0.7056, 0.714, 0.7222, 0.7301, 0.7378, 0.7452, 0.7525, 0.7596, 0.7664, 0.7731, 0.7795, 0.7858, 0.7919, 0.7978, 0.8036, 0.8092, 0.8146, 0.8199, 0.8251, 0.83, 0.8349, 0.8396, 0.8442, 0.8486, 0.8529, 0.8571, 0.8612, 0.8651, 0.869, 0.8727, 0.8763, 0.8799, 0.8833, 0.8866, 0.8899, 0.893, 0.896, 0.899, 0.9019, 0.9047, 0.9074, 0.91, 0.9126, 0.9151, 0.9175, 0.9199, 0.9221, 0.9244, 0.9265, 0.9286, 0.9306, 0.9326, 0.9345, 0.9364, 0.9382, 0.94, 0.9417, 0.9434, 0.945, 0.9465, 0.9481, 0.9495, 0.951, 0.9524, 0.9537, 0.9551, 0.9563, 0.9576, 0.9588, 0.96, 0.9611, 0.9622, 0.9633, 0.9643, 0.9654, 0.9663, 0.9673, 0.9682, 0.9691, 0.97, 0.9709, 0.9717, 0.9725, 0.9733, 0.9741, 0.9748, 0.9755, 0.9762, 0.9769, 0.9775, 0.9782, 0.9788, 0.9794, 0.98, 0.9806, 0.9811, 0.9817, 0.9822, 0.9827, 0.9832, 0.9837, 0.9841, 0.9846, 0.985, 0.9854, 0.9859, 0.9863, 0.9867, 0.987, 0.9874, 0.9878, 0.9881, 0.9885, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9908, 0.9911, 0.9914, 0.9916, 0.9918, 0.9921, 0.9923, 0.9925, 0.9927, 0.9929, 0.9931, 0.9933, 0.9935, 0.9937, 0.9939, 0.9941, 0.9942, 0.9944, 0.9946, 0.9947, 0.9949, 0.995, 0.9951, 0.9953, 0.9954, 0.9956, 0.9957, 0.9958, 0.9959, 0.996, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.9969, 0.997, 0.9971, 0.9972, 0.9973, 0.9974, 0.9974, 0.9975, 0.9976, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.998, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9986, 0.9986, 0.9986, 0.9987, 0.9987, 0.9988, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.999, 0.999, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 2915, easing: 'linear(0, 0.0134, 0.0379, 0.0644, 0.0909, 0.1167, 0.1419, 0.1664, 0.1901, 0.2132, 0.2356, 0.2574, 0.2786, 0.2991, 0.3191, 0.3385, 0.3574, 0.3757, 0.3935, 0.4108, 0.4276, 0.4439, 0.4597, 0.4751, 0.4901, 0.5046, 0.5187, 0.5324, 0.5458, 0.5587, 0.5713, 0.5835, 0.5954, 0.6069, 0.6181, 0.629, 0.6396, 0.6498, 0.6598, 0.6695, 0.6789, 0.6881, 0.697, 0.7056, 0.714, 0.7222, 0.7301, 0.7378, 0.7452, 0.7525, 0.7596, 0.7664, 0.7731, 0.7795, 0.7858, 0.7919, 0.7978, 0.8036, 0.8092, 0.8146, 0.8199, 0.8251, 0.83, 0.8349, 0.8396, 0.8442, 0.8486, 0.8529, 0.8571, 0.8612, 0.8651, 0.869, 0.8727, 0.8763, 0.8799, 0.8833, 0.8866, 0.8899, 0.893, 0.896, 0.899, 0.9019, 0.9047, 0.9074, 0.91, 0.9126, 0.9151, 0.9175, 0.9199, 0.9221, 0.9244, 0.9265, 0.9286, 0.9306, 0.9326, 0.9345, 0.9364, 0.9382, 0.94, 0.9417, 0.9434, 0.945, 0.9465, 0.9481, 0.9495, 0.951, 0.9524, 0.9537, 0.9551, 0.9563, 0.9576, 0.9588, 0.96, 0.9611, 0.9622, 0.9633, 0.9643, 0.9654, 0.9663, 0.9673, 0.9682, 0.9691, 0.97, 0.9709, 0.9717, 0.9725, 0.9733, 0.9741, 0.9748, 0.9755, 0.9762, 0.9769, 0.9775, 0.9782, 0.9788, 0.9794, 0.98, 0.9806, 0.9811, 0.9817, 0.9822, 0.9827, 0.9832, 0.9837, 0.9841, 0.9846, 0.985, 0.9854, 0.9859, 0.9863, 0.9867, 0.987, 0.9874, 0.9878, 0.9881, 0.9885, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9908, 0.9911, 0.9914, 0.9916, 0.9918, 0.9921, 0.9923, 0.9925, 0.9927, 0.9929, 0.9931, 0.9933, 0.9935, 0.9937, 0.9939, 0.9941, 0.9942, 0.9944, 0.9946, 0.9947, 0.9949, 0.995, 0.9951, 0.9953, 0.9954, 0.9956, 0.9957, 0.9958, 0.9959, 0.996, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.9969, 0.997, 0.9971, 0.9972, 0.9973, 0.9974, 0.9974, 0.9975, 0.9976, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.998, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9986, 0.9986, 0.9986, 0.9987, 0.9987, 0.9988, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.999, 0.999, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 280, d = 120;

// 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: 2915 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.molasses = { tension: 280, friction: 120 }. @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)
- [react-spring slow](https://vawe.dev/springs/react-spring-slow)
- [SwiftUI .smooth](https://vawe.dev/springs/swiftui-smooth)
- [react-spring default](https://vawe.dev/springs/react-spring-default)
- [All spring presets](https://vawe.dev/springs)