Easing for a small pop or notification: curve, duration and what to avoid
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.
Demo
pop
linear
The same move with pop and with linear. If your system asks for reduced motion, nothing plays and the final state shows.
Ease and duration
- Ease
- poppeak speed 4.79x the average
- Duration
- 0.5 to 0.8 s for a corner notification that slides in over more than 20 px
- Halfway at
- 17% of the time90% of the travel at 40%
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.
Code
@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;
}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' },
);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);import { EASE } from '../../core/motion/presets.js';
el.animate(keyframes, { duration: 650, easing: EASE.pop, fill: 'both' });