# Easing for a UI panel or card: curve, duration and what to

> Use land for a UI panel or card, over 0.22 to 0.5 s. Avoid scale or overshoot on a panel.

Canonical: https://vawe.dev/easing/for/panel-entrance
Last updated: 2026-11-04

Use land for a UI panel or card, over 0.22 to 0.5 s. land reaches 50% of its travel at 14% of the time and 90% at 49%. Avoid scale or overshoot on a panel.

| Measure | Value |
| --- | --- |
| Job | UI panel or card in |
| Ease | land (https://vawe.dev/easing/land) |
| Duration | 0.22 to 0.5 s |

## What to avoid

Scale or overshoot on a panel. A copied product panel only fades in 220 ms with a 0.8vh rise.

## CSS

```css
@keyframes rise {
  from { opacity: 0; translate: 0 0.8vh; }
  to { opacity: 1; translate: 0 0; }
}

.target {
  animation: rise 220ms cubic-bezier(0.12, 0.576, 0.25, 1) both;
}
```

## Web Animations

```js
el.animate(
  [{ opacity: '0', translate: '0 0.8vh' }, { opacity: '1', translate: '0 0' }],
  { duration: 220, easing: 'cubic-bezier(0.12, 0.576, 0.25, 1)', fill: 'both' },
);
```

## CSS linear()

```css
animation-timing-function: linear(0, 0.1162, 0.2217, 0.3146, 0.3951, 0.4645, 0.5245, 0.5766, 0.6223, 0.6625, 0.6981, 0.7298, 0.7582, 0.7836, 0.8066, 0.8273, 0.846, 0.863, 0.8784, 0.8924, 0.9051, 0.9166, 0.9271, 0.9366, 0.9452, 0.9529, 0.9599, 0.9662, 0.9718, 0.9768, 0.9812, 0.9851, 0.9884, 0.9913, 0.9937, 0.9957, 0.9973, 0.9985, 0.9994, 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 |
| --- | --- | --- |
| Panel in | fade 220 ms, rise 0.8vh | A window fades in 0.10 to 0.23 s with at most 2 px of rise, no scale. |

## Video components for this job

- [Card assemble](https://vawe.dev/video-components/card-assemble)
- [Skeleton reveal](https://vawe.dev/video-components/skeleton-reveal)
- [Clip expand from a point](https://vawe.dev/video-components/clip-expand)
- [Device tilt stage](https://vawe.dev/video-components/device-tilt-stage)

## Other jobs

- [Title or text entrance](https://vawe.dev/easing/for/title-entrance)
- [Value change (number swap)](https://vawe.dev/easing/for/number-change)
- [List stagger](https://vawe.dev/easing/for/list-stagger)
- [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)
- [land](https://vawe.dev/easing/land)