Easing Visualizer

How to use it

1. Pick an easing from the list. It is grouped into Basic, the four CSS keyword curves, nine families (sine through bounce) in in / out / inOut variants, and three spring presets.
2. Read the canvas: the solid curve is the easing, the dashed diagonal is a linear reference, and the moving dot shows progress at the current time.
3. Press Play to run the motion preview. The solid ball follows the easing, the hollow ball moves at a constant speed for comparison.
4. Set the duration you intend to ship, then choose an output format.
5. Copy the generated code. The CSS format emits a transition-timing-function, the JavaScript format emits a standalone function of t.

Common use cases

• Choosing a curve before writing code — compare easeOutCubic with easeOutQuint on the same canvas instead of guessing from names.
• Handing a curve to a designer — copy the cubic-bezier values into a design token so CSS and the animation library agree.
• Matching an existing motion spec — a spec that names a GSAP ease like power2.out maps to easeOutCubic here.
• Timing a spring feel — the three spring presets show how decay and frequency change the overshoot before you commit to numbers.
• Teaching what easing does — the constant-speed reference ball makes acceleration and deceleration visible.

Why it stays private

The curve is sampled and drawn on a canvas in your browser. No project name, timing value or exported snippet leaves the device.

FAQ

Q: Is the cubic-bezier output exact for every easing? A: Only for linear and the four CSS keyword curves, which are cubic-beziers already. For bounce, elastic and spring the output is a least-squares fit: those curves overshoot repeatedly, and one cubic-bezier segment can only approximate the shape.

Q: Why does the JavaScript export clamp t? A: The generated function clamps input to the range 0 to 1 so a slightly late frame cannot push progress past the end value. Remove the clamp if you rely on overshoot outside the range.

Q: Do the Anime.js and GSAP strings work as-is? A: They follow the naming of Anime.js v3 and GSAP 3. Older versions used different names, and spring easings map to the nearest built-in parameter set rather than an exact match.