About

About EasingLab

A free, no-sign-up playground for animation timing: shape a curve, see the motion, copy the code.

Most easing tools show you a curve; few let you feel it. EasingLab pairs a draggable cubic-bezier() editor with a live preview that animates a real element along your curve — beside a linear one — so lead, lag and overshoot are obvious before you ever touch your codebase. Then it hands you the exact curve as a CSS transition, a @keyframes block, a Framer Motion ease array, or a Web Animations API call.

How it works

The curves follow the CSS Easing specification: the two control points define a Bezier between the fixed (0,0) start and (1,1) end. The X of each point stays within 0–1 (time only moves forward); the Y can overshoot to create springy motion. Everything — editor, preview, code — runs in your browser.

What it is not

It generates standard cubic-bezier curves, which cover almost all UI motion. True physics springs and multi-bounce curves are not a single cubic-bezier — for those, use your animation library's spring config. The presets mirror the well-known easing families.