An easing curve, and what it does to velocity
Progress is what most tools plot. Velocity is what you feel — and where a curve reveals whether it eases or lurches.
An easing curve, and what it does to velocity
Progress is what most tools plot. Velocity is what you actually feel — and it is where a curve reveals whether it eases or lurches.
Why x is constrained and y is not
The x axis is time. A CSS timing function has to be a function of time — one output per input — so the x control points are constrained to 0–1. Outside that the curve would fold back on itself and the declaration is invalid.
The y axis is progress, and it may go outside 0–1. That is exactly how overshoot and anticipation work: the value passes its destination and settles back.
Overshoot is fine on a transform and wrong on a colour or an opacity. Those are clamped, so the overshoot is silently discarded and the motion stalls at the end instead of springing.
Solving x for a given time uses Newton-Raphson with a bisection fallback, because Newton stalls where the curve is flat and a stalled solver returns a wrong progress value rather than failing.
Ease out for things arriving, ease in for things leaving
Something entering the screen should decelerate into place — fast at first, settling at the end. Something leaving should accelerate away. ease-in-out applied to everything is the default that makes interfaces feel sluggish.
The velocity graph tells you more than the curve
Two curves can look similar and feel completely different. A spike in the velocity plot is a lurch; a flat region is a pause. Both are visible there and neither is obvious from the progress curve.