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

Easing Curves — Animation Timing Function Explorer

Interactive 3D visualizer for animation easing curves: watch UI elements move under Linear, Ease-In-Out, Elastic, Bounce and a live-editable cubic-bezier timing function, with the real Penner/CSS formulas driving every lane.

Computer Science3DEasy60 FPS📱 Mobile-adapted⇄ 2D 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 simulator renders five animation lanes in 3D, each driven by a different real easing formula (linear, ease-out, elastic, bounce, and a live-editable cubic-bezier curve matching CSS's own cubic-bezier() syntax), so you can watch a UI element travel under each curve side by side while the actual curve shape is plotted as a dotted trail above its lane. Adjust the two bezier control points to feel how they produce anticipation, overshoot and springy settle — the same four numbers used in real CSS transitions.

⚙ Under the hood

Watch five real easing formulas — linear, ease-out cubic, elastic, bounce, and a live-editable cubic-bezier curve — drive UI elements across parallel 3D lanes, with the actual timing curve plotted as a dotted trail above each track.

animationeasingcubic-bezieruicsstiming-function

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install