Home▸Computer Science▸Easing Curves 2D — Animation Timing Function Explorer

Easing Curves 2D — Animation Timing Function Explorer

Interactive 2D visualizer for animation easing curves: a draggable, zoomable cubic-bezier graph plus five parallel timing lanes driven by the real Linear, Ease-out, Elastic and Bounce formulas and CSS's own cubic-bezier() algorithm.

Computer Science2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Micro-animations — hover states, loading spinners, ripple feedback, tooltips — all read as "natural" or "mechanical" purely because of the timing function shaping their motion over time. This 2D simulator plots five easing formulas (linear, ease-out, elastic, bounce, and a live-editable cubic-bezier curve matching CSS's own cubic-bezier() syntax) on a draggable, zoomable graph, then plays each one as a marker sliding across its own parallel lane underneath — so you can watch the curve shape and the resulting motion side by side. Drag the two bezier handles straight on the graph to feel how they produce anticipation, overshoot and springy settle — the same four numbers used in real CSS transitions.

⚙ Under the hood

A draggable, zoomable 2D bezier graph plots five real easing formulas — linear, ease-out cubic, elastic, bounce, and a live-editable cubic-bezier curve — while five parallel lanes underneath play the same curves as moving markers, with a dotted trail sampling each e(t) shape above its track.

animationeasingcubic-bezieruicsstiming-function

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install