Easing for a camera move under 2 s: curve, duration and what to avoid
Use land for a camera move under 2 s, over 0.5 to 2 s. land reaches 50% of its travel at 14% of the time and 90% at 49%. Avoid settle or glide: they reach 5% of the travel only after 20% and 14% of the time, so a 1.6 s pull-back looks dead for its first 0.33 s.
Demo
land
linear
The same move with land and with linear. If your system asks for reduced motion, nothing plays and the final state shows.
Ease and duration
- Ease
- landpeak speed 4.8x the average
- Duration
- 0.5 to 2 s
- Halfway at
- 14% of the time90% of the travel at 49%
What to avoid
Settle or glide: they reach 5% of the travel only after 20% and 14% of the time, so a 1.6 s pull-back looks dead for its first 0.33 s.
Code
@keyframes push {
from { scale: 1; }
to { scale: 1.2; }
}
.target {
animation: push 1250ms cubic-bezier(0.12, 0.576, 0.25, 1) both;
}el.animate(
[{ scale: '1' }, { scale: '1.2' }],
{ duration: 1250, easing: 'cubic-bezier(0.12, 0.576, 0.25, 1)', fill: 'both' },
);animation-timing-function: linear(0, 0.1162, 0.2217, 0.3146, 0.3951, 0.4645, 0.5245, 0.5766, 0.6223, 0.6625, 0.6981, 0.7298, 0.7582, 0.7836, 0.8066, 0.8273, 0.846, 0.863, 0.8784, 0.8924, 0.9051, 0.9166, 0.9271, 0.9366, 0.9452, 0.9529, 0.9599, 0.9662, 0.9718, 0.9768, 0.9812, 0.9851, 0.9884, 0.9913, 0.9937, 0.9957, 0.9973, 0.9985, 0.9994, 0.9998, 1);import { EASE } from '../../core/motion/presets.js';
el.animate(keyframes, { duration: 1250, easing: EASE.land, fill: 'both' });