# Motion scale default: CSS linear() spring, stiffness 550 damping 30

> Motion scale default as a CSS linear() spring: stiffness 550, damping 30, settles in 0.445 s, overshoots 7.3%. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/motion-scale
Last updated: 2026-11-04

Stiffness 550, damping 30 and mass 1 give a damping ratio of 0.64, so the spring is underdamped. It settles to within 0.1% in 0.445 s. It passes the end value by up to 7.3% at 0.174 s and crosses it 2 times.

The source calls it criticallyDampedSpring, but damping 30 is below critical for stiffness 550, which is 2 x sqrt(550), about 46.9. Motion uses that value only when a scale animates to 0.

| Measure | Value |
| --- | --- |
| Stiffness | 550 |
| Damping | 30 |
| Mass | 1 |
| Damping ratio | 0.64 (underdamped) |
| Settle time | 0.445 s |
| Overshoot | 7.3% |
| Crosses the end value | 2 |
| 50% of travel at | 0.06 s |
| 90% of travel at | 0.105 s |

## CSS linear()

```css
transition: translate 445ms linear(0, 0.008, 0.0304, 0.0645, 0.1079, 0.1587, 0.2148, 0.2746, 0.3366, 0.3994, 0.4619, 0.5233, 0.5827, 0.6395, 0.6932, 0.7435, 0.79, 0.8327, 0.8714, 0.9062, 0.9372, 0.9643, 0.9878, 1.0079, 1.0248, 1.0387, 1.0499, 1.0586, 1.065, 1.0694, 1.0721, 1.0732, 1.073, 1.0717, 1.0694, 1.0665, 1.0629, 1.0589, 1.0546, 1.0501, 1.0455, 1.0409, 1.0364, 1.032, 1.0277, 1.0237, 1.02, 1.0165, 1.0132, 1.0103, 1.0077, 1.0053, 1.0032, 1.0014, 0.9999, 0.9986, 0.9975, 0.9966, 0.9959, 0.9954, 0.995, 0.9948, 0.9947, 0.9946, 0.9947, 0.9949, 0.9951, 0.9953, 0.9956, 0.9959, 0.9962, 0.9966, 0.9969, 0.9972, 0.9976, 0.9979, 0.9982, 0.9984, 0.9987, 0.999, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 445, easing: 'linear(0, 0.008, 0.0304, 0.0645, 0.1079, 0.1587, 0.2148, 0.2746, 0.3366, 0.3994, 0.4619, 0.5233, 0.5827, 0.6395, 0.6932, 0.7435, 0.79, 0.8327, 0.8714, 0.9062, 0.9372, 0.9643, 0.9878, 1.0079, 1.0248, 1.0387, 1.0499, 1.0586, 1.065, 1.0694, 1.0721, 1.0732, 1.073, 1.0717, 1.0694, 1.0665, 1.0629, 1.0589, 1.0546, 1.0501, 1.0455, 1.0409, 1.0364, 1.032, 1.0277, 1.0237, 1.02, 1.0165, 1.0132, 1.0103, 1.0077, 1.0053, 1.0032, 1.0014, 0.9999, 0.9986, 0.9975, 0.9966, 0.9959, 0.9954, 0.995, 0.9948, 0.9947, 0.9946, 0.9947, 0.9949, 0.9951, 0.9953, 0.9956, 0.9959, 0.9962, 0.9966, 0.9969, 0.9972, 0.9976, 0.9979, 0.9982, 0.9984, 0.9987, 0.999, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 550, d = 30;

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

criticallyDampedSpring(target) = { type: "spring", stiffness: 550, damping: target === 0 ? 2 * Math.sqrt(550) : 30, restSpeed: 10 }. motion-dom 14.9.0 (motion and framer-motion 14.9.0), criticallyDampedSpring in animation/utils/default-transitions.ts (https://github.com/motiondivision/motion/blob/main/packages/motion-dom/src/animation/utils/default-transitions.ts). Conversion: Stiffness and damping are used as they are, with mass 1.

## Related

- [Motion x, y and rotate default](https://vawe.dev/springs/motion-transform)
- [Material 3 Standard default spatial](https://vawe.dev/springs/material-standard-default-spatial)
- [Material 3 Expressive fast spatial](https://vawe.dev/springs/material-expressive-fast-spatial)
- [Compose spring() default](https://vawe.dev/springs/compose-no-bouncy-medium)
- [All spring presets](https://vawe.dev/springs)