Easing for a camera move of 2 s or more: curve, duration and what to avoid
Use glide for a camera move of 2 s or more, over 2 s or more. glide reaches 50% of its travel at 51% of the time and 90% at 82%. Avoid land: it stops dead on arrival.
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
- Duration
- 2 s or more
- Halfway at
- 51% of the time90% of the travel at 82%
What to avoid
Land: it stops dead on arrival. Glide for a push or a drift; settle for a pull of 2 s or more that starts and ends at rest. A camera move under 2 s takes land.
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' });