Easing Curves — Animation Timing Function Explorer

Playback

Duration 900 ms

Custom cubic-bezier lane

P1 x 0.68

P1 y -0.55

P2 x 0.27

P2 y 1.55

cubic-bezier(0.68, -0.55, 0.27, 1.55)

Lanes

Live readout

Elapsed t

0.00

Custom eased(t)

0.00

Peak overshoot

Elapsed time

0 ms

How it works

Every micro-animation — a hover glow, a ripple, a card that settles into place — is a value interpolated over time by a timing (easing) function e(t): [0,1] → ℝ, applied as position = start + (end − start) · e(t). Five real formulas drive the lanes below:

Linear:        e(t) = t
Ease-out:      e(t) = 1 - (1-t)^3
Cubic-bezier:  x(u) = 3(1-u)^2 u·x1 + 3(1-u) u^2·x2 + u^3   (solve u from x=t via Newton-Raphson)
               e(t) = y(u) at that u — the exact model behind CSS's cubic-bezier() and Framer Motion
Elastic-out:   e(t) = 2^(-10t)·sin((10t-0.75)·2π/3) + 1
Bounce-out:    piecewise parabolic segments (n1=7.5625, d1=2.75) that simulate a ball losing energy on each bounce

Play all lanes — advances every lane's t from 0→1 over the chosen duration, moving each cube by its own e(t).
Cubic-bezier sliders — edit P1/P2 of the custom lane live; the dotted curve above it redraws immediately. y < 0 or y > 1 produces the "anticipation" and "overshoot" feel used in spring-like UI transitions.
Peak overshoot — the highest e(t) value reached above 1.0 during the run, sampled from the custom curve.

Real-world relevance: this is exactly the math CSS transition-timing-function, the Web Animations API, and JS tweening libraries (GSAP, Framer Motion, react-spring's non-physical presets) evaluate every animation frame.

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.