Easing for a hold drift: curve, duration and what to avoid
Use glide for a hold drift, over the length of the hold, 2 s or more. glide reaches 50% of its travel at 51% of the time and 90% at 82%. Avoid a copied product surface: it holds still and stays alive through what the product does (a caret, a timer, a hover).
Demo
glide
linear
The same move with glide and with linear. If your system asks for reduced motion, nothing plays and the final state shows.
Ease and duration
- Ease
- glidepeak speed 1.47x the average
- Duration
- the length of the hold, 2 s or more
- Halfway at
- 51% of the time90% of the travel at 82%
What to avoid
A copied product surface: it holds still and stays alive through what the product does (a caret, a timer, a hover).
Code
@keyframes push {
from { scale: 1; }
to { scale: 1.2; }
}
.target {
animation: push 2000ms cubic-bezier(0.3333, 0, 0.67, 0.967) both;
}el.animate(
[{ scale: '1' }, { scale: '1.2' }],
{ duration: 2000, easing: 'cubic-bezier(0.3333, 0, 0.67, 0.967)', fill: 'both' },
);animation-timing-function: linear(0, 0.0018, 0.007, 0.0155, 0.0271, 0.0415, 0.0587, 0.0784, 0.1005, 0.1248, 0.1511, 0.1792, 0.209, 0.2402, 0.2728, 0.3065, 0.3411, 0.3766, 0.4126, 0.4491, 0.4858, 0.5226, 0.5593, 0.5957, 0.6317, 0.667, 0.7016, 0.7352, 0.7676, 0.7987, 0.8282, 0.8561, 0.8821, 0.906, 0.9276, 0.9469, 0.9635, 0.9773, 0.9881, 0.9957, 1);import { EASE } from '../../core/motion/presets.js';
el.animate(keyframes, { duration: 2000, easing: EASE.glide, fill: 'both' });