Easings

Easing functions for animate. An easing is just a function:

type Easing = (t: number) => number   // linear progress 0..1 → eased progress

Anything of that shape works as animate({ easing }) — the built-ins below cover the common cases, cubicBezier builds the rest, and you can hand-write your own.

At a glance

animate({ from: 0, to: 300, duration: 400, easing: easeOut,
          onUpdate: v => { card.x = v } })

const overshoot = cubicBezier(0.34, 1.56, 0.64, 1)     // back-out: passes the target, settles
animate({ from: 0.5, to: 1, duration: 250, easing: overshoot,
          onUpdate: v => { card.scale = v } })

Built-in easings

easeIn(t): number       // quadratic accelerate: t²  — slow start, fast finish
easeOut(t): number      // quadratic decelerate: 1 − (1 − t)²  — fast start, slow settle
easeInOut(t): number    // easeIn for the first half, mirrored for the second

All three are plain quadratic curves. easeOut is what most UI motion wants (respond immediately, settle gently).

cubicBezier

cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing

Builds an easing from two control points — the same parameters as CSS cubic-bezier(x1, y1, x2, y2), so any curve from a CSS easing gallery ports directly. The returned function is reusable; create it once, not per tween.

• x1 / x2 must stay in 0..1 (they parameterize time).
• y1 / y2 may go outside 0..1 — that's how you get overshoot (back/spring feels): eased progress temporarily exceeds 1, so the animated value passes to and comes back.
• Endpoints are exact: input 0 returns 0, input 1 returns 1.
• cubicBezier(a, a, b, b) (control points on the diagonal) returns a plain linear easing.

See also

• animate — where easings plug in