# Easing for a list stagger: curve, duration and what to

> Use landSoft for a list stagger, over 0.15 to 0.3 s a row, 30 to 80 ms apart, the run within 0.5 s. Avoid land on every row: a hard first frame on each reads 

Canonical: https://vawe.dev/easing/for/list-stagger
Last updated: 2026-11-04

Use landSoft for a list stagger, over 0.15 to 0.3 s a row, 30 to 80 ms apart, the run within 0.5 s. landSoft reaches 50% of its travel at 19% of the time and 90% at 53%. Avoid land on every row: a hard first frame on each reads as flicker.

| Measure | Value |
| --- | --- |
| Job | List stagger |
| Ease | landSoft (https://vawe.dev/easing/land-soft) |
| Duration | 0.15 to 0.3 s a row, 30 to 80 ms apart, the run within 0.5 s |

## What to avoid

Land on every row: a hard first frame on each reads as flicker. Overshoot on more than every third row.

## CSS

```css
@keyframes row-in {
  from { opacity: 0; translate: 0 1vh; }
  to { opacity: 1; translate: 0 0; }
}

.target {
  animation: row-in 300ms cubic-bezier(0.2, 0.5, 0.25, 1) both;
  animation-delay: calc(var(--i) * 70ms); /* each row sets --i: 0, 1, 2 ... */
}
```

## Web Animations

```js
rows.forEach((row, i) =>
  row.animate([{ opacity: '0', translate: '0 1vh' }, { opacity: '1', translate: '0 0' }], { duration: 300, delay: i * 70, easing: 'cubic-bezier(0.2, 0.5, 0.25, 1)', fill: 'both' }),
);
```

## CSS linear()

```css
animation-timing-function: linear(0, 0.0644, 0.1319, 0.2016, 0.2716, 0.3402, 0.4055, 0.4665, 0.5224, 0.573, 0.6186, 0.6596, 0.6963, 0.7292, 0.7588, 0.7854, 0.8094, 0.831, 0.8505, 0.8681, 0.884, 0.8984, 0.9114, 0.9231, 0.9337, 0.9432, 0.9518, 0.9594, 0.9662, 0.9722, 0.9776, 0.9822, 0.9862, 0.9897, 0.9926, 0.9949, 0.9968, 0.9982, 0.9992, 0.9998, 1);
```

## Measured source

Measured on ChatGPT and Vercel Analytics clips at 30 fps, read off frames, plus or minus 33 ms.

| Preset | Value | Measured |
| --- | --- | --- |
| Row in, stagger | fade 300 ms, rise 1vh, 70 ms apart | A row or line arrives in 0.15 to 0.3 s. Rows come 70 to 100 ms apart (7 rows in 0.5 s). |

## Video components for this job

- [Grid stagger wave](https://vawe.dev/video-components/grid-stagger-wave)

## Other jobs

- [Title or text entrance](https://vawe.dev/easing/for/title-entrance)
- [UI panel or card in](https://vawe.dev/easing/for/panel-entrance)
- [Value change (number swap)](https://vawe.dev/easing/for/number-change)
- [Small pop or notification](https://vawe.dev/easing/for/notification-pop)
- [Exit](https://vawe.dev/easing/for/exit)
- [Camera move under 2 s](https://vawe.dev/easing/for/short-camera-move)
- [Camera move of 2 s or more](https://vawe.dev/easing/for/long-camera-move)
- [Scan or wipe travel](https://vawe.dev/easing/for/scan-wipe)
- [Hold drift](https://vawe.dev/easing/for/hold-drift)
- [Send, small arrival](https://vawe.dev/easing/for/send-bubble)
- [Typing](https://vawe.dev/easing/for/typing)
- [Stream](https://vawe.dev/easing/for/text-streaming)

## Related

- [All easing functions](https://vawe.dev/easing)
- [landSoft](https://vawe.dev/easing/land-soft)