UI StackMotion
Sites

Curves

The named curve set: the CSS keywords, the Worlds tokens, Material's easings, the iOS default and the spring. Each is drawn as progress against time with the point where its speed peaks, which is the one word that tells curves apart: at the start, it lands; at the end, it stops dead; in the middle, it swings; nowhere, it is linear; past the mark, it is a spring. The dot on the strip under each graph runs the curve over 1200ms so the shapes can be compared side by side.

The maths is motioncheck.py's, ported to tools/curves.py and js/curves.js; check.py --selftest proves the ports agree.

The spring response and damping fraction, the iOS parametrisation; overshoot and settle in closed form