Easing for a scan or wipe travel: curve, duration and what to avoid
Use settle for a scan or wipe travel, over 0.5 to 1 s. settle reaches 50% of its travel at 50% of the time and 90% at 73%. Avoid swap: its steep middle turns the travelling line into a blur.
Demo
settle
linear
The same move with settle and with linear. If your system asks for reduced motion, nothing plays and the final state shows.
Ease and duration
- Ease
- settlepeak speed 2.5x the average
- Duration
- 0.5 to 1 s
- Halfway at
- 50% of the time90% of the travel at 73%
What to avoid
Swap: its steep middle turns the travelling line into a blur. Keep swap for the value the line flips.
Code
@keyframes scan {
from { translate: -100% 0; }
to { translate: 0 0; }
}
.target {
animation: scan 750ms cubic-bezier(0.6, 0, 0.4, 1) both;
}el.animate(
[{ translate: '-100% 0' }, { translate: '0 0' }],
{ duration: 750, easing: 'cubic-bezier(0.6, 0, 0.4, 1)', fill: 'both' },
);animation-timing-function: linear(0, 0.0006, 0.0025, 0.0057, 0.0104, 0.0168, 0.0251, 0.0354, 0.048, 0.0631, 0.0811, 0.1023, 0.1272, 0.1562, 0.1899, 0.2287, 0.273, 0.323, 0.3783, 0.4379, 0.5, 0.5621, 0.6217, 0.677, 0.727, 0.7713, 0.8101, 0.8438, 0.8728, 0.8977, 0.9189, 0.9369, 0.952, 0.9646, 0.9749, 0.9832, 0.9896, 0.9943, 0.9975, 0.9994, 1);import { EASE } from '../../core/motion/presets.js';
el.animate(keyframes, { duration: 750, easing: EASE.settle, fill: 'both' });