Easing

Easing

An easing function maps linear time t, from 0 to 1, to progress. Easing supplies linear, quad, cubic, poly(n), sin, circle, exp, bounce, elastic(), back(), bezier() and the CSS-style ease. A bare curve eases in (starts slowly); Easing.out(f) mirrors it and Easing.inOut(f) does both. Sampled at three points:

src/anim/Curves.tsx: sampling easing functions (excerpt)TSX

const curves: [string, EasingFunction][] = [
  ['linear', Easing.linear],
  ['out(cubic)', Easing.out(Easing.cubic)],
  ['back(1.7)', Easing.back(1.7)],
  ['out(back(1.7))', Easing.out(Easing.back(1.7))],
  ['bezier(.2,.8,.2,1)', Easing.bezier(0.2, 0.8, 0.2, 1)],
];
console.log('curve'.padEnd(19), 't=0.25  t=0.5  t=0.75');
for (const [name, f] of curves) {
  console.log(name.padEnd(19), [0.25, 0.5, 0.75].map((t) => f(t).toFixed(3)).join('  '));
}

Output

 LOG  curve               t=0.25  t=0.5  t=0.75
 LOG  linear              0.250  0.500  0.750
 LOG  out(cubic)          0.578  0.875  0.984
 LOG  back(1.7)           -0.064  -0.087  0.183
 LOG  out(back(1.7))      0.817  1.087  1.064
 LOG  bezier(.2,.8,.2,1)  0.767  0.946  0.991

back dips below 0 first; out(back) overshoots to 108.7%. Use ease-out for things entering the screen and ease-in for things leaving. bezier() takes the numbers of CSS cubic-bezier().

MENU