# Easing for a small pop or notification: curve, duration

> Use pop for a small pop or notification, over 0.5 to 0.8 s for a corner notification that slides in over more than 20 px. Avoid text blocks and more than one 

Canonical: https://vawe.dev/easing/for/notification-pop
Last updated: 2026-11-04

Use pop for a small pop or notification, over 0.5 to 0.8 s for a corner notification that slides in over more than 20 px. pop reaches 50% of its travel at 17% of the time and 90% at 40%. Avoid text blocks and more than one moving item.

| Measure | Value |
| --- | --- |
| Job | Small pop or notification |
| Ease | pop (https://vawe.dev/easing/pop) |
| Duration | 0.5 to 0.8 s for a corner notification that slides in over more than 20 px |

## What to avoid

Text blocks and more than one moving item. A pop under 0.35 s leaves 2.4 frames of settle at 30 fps. A small item that moves 3 to 20 px (a bubble, a chip, a tip) takes the send spring instead: k 500, d 25.

## CSS

```css
@keyframes pop-in {
  from { opacity: 0; translate: 48px 0; }
  to { opacity: 1; translate: 0 0; }
}

.target {
  animation: pop-in 650ms cubic-bezier(0.12, 0.576, 0.65, 1.525) both;
}
```

## Web Animations

```js
el.animate(
  [{ opacity: '0', translate: '48px 0' }, { opacity: '1', translate: '0 0' }],
  { duration: 650, easing: 'cubic-bezier(0.12, 0.576, 0.65, 1.525)', fill: 'both' },
);
```

## CSS linear()

```css
animation-timing-function: linear(0, 0.0553, 0.104, 0.1483, 0.1895, 0.2282, 0.2649, 0.2998, 0.3333, 0.3656, 0.3966, 0.4267, 0.4557, 0.4839, 0.5112, 0.5378, 0.5636, 0.5887, 0.6132, 0.637, 0.6602, 0.6827, 0.7047, 0.7262, 0.747, 0.7674, 0.7872, 0.8064, 0.8252, 0.8434, 0.8611, 0.8783, 0.8951, 0.9113, 0.927, 0.9422, 0.957, 0.9712, 0.9849, 0.9982, 1.0109, 1.0232, 1.0349, 1.0461, 1.0568, 1.067, 1.0767, 1.0858, 1.0944, 1.1025, 1.11, 1.1169, 1.1233, 1.129, 1.1342, 1.1388, 1.1428, 1.1461, 1.1488, 1.1509, 1.1522, 1.1529, 1.1528, 1.1521, 1.1506, 1.1483, 1.1452, 1.1413, 1.1365, 1.1309, 1.1243, 1.1169, 1.1084, 1.0989, 1.0884, 1.0767, 1.0639, 1.0499, 1.0346, 1.018, 1);
```

## Video components for this job

- [Arrival spring](https://vawe.dev/video-components/arrival-spring)

## 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)
- [List stagger](https://vawe.dev/easing/for/list-stagger)
- [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)
- [pop](https://vawe.dev/easing/pop)