Reading the curve
Horizontal is time, vertical is progress. A straight diagonal is linear — mechanical and lifeless. Curves that start shallow accelerate in (ease-in); curves that end shallow brake softly (ease-out). UI almost always wants ease-out flavors: the element responds instantly, then settles.
Overshoot — the y values beyond 0 and 1
CSS allows the y control values outside the 0–1 range, which makes the animation shoot past its target and spring back. Try the bounce-out preset: cubic-bezier(0.34, 1.56, 0.64, 1) — that 1.56 is the overshoot. A little (1.2–1.6) feels playful; beyond that it feels broken. The canvas here gives you the extra headroom to drag into.
Frequently asked questions
Does anything get uploaded?
No. The curve is drawn and sampled in the page itself.
Which easing should I use for interface animation?
Ease-out for anything entering — fast then settling feels responsive. Ease-in for anything leaving. Ease-in-out is smooth but feels sluggish on small UI movements.
Can the curve go outside 0 and 1?
The Y values can, which produces overshoot and bounce. X must stay between 0 and 1, because time cannot run backwards.
How long should a transition be?
150 to 250 milliseconds for most interface movement. Beyond about 400 it starts to feel like waiting.
Something wrong with this tool, or an idea for it? Tell us