ANIMATION
Easing Visualizer
Plot and compare easing curves for game and UI animation.
MOTION DESIGN
Explore an easing curve
Progress at 50% of duration: (% of the way)
Easing function guide
Easing functions are the difference between a UI that feels cheap and one that feels polished — the same animation at the same duration reads completely differently with ease-out instead of linear. This visualizer plots the common curves so you can pick the right one and copy the formula into your engine.
What an easing function is
An easing function maps progress t ∈ [0,1] (elapsed ÷ duration) to animated progress. Linear passes time through unchanged. Ease-in starts slow and accelerates; ease-out starts fast and decelerates; ease-in-out does both. The curve is the motion feel.
The visualizer plots each function so you can see the shape at a glance — and the marker at 50% duration shows exactly how far along the animation is halfway through.
Picking the right one
Ease-out for things entering the screen (menus, panels, pop-ins) — it feels responsive because it starts fast. Ease-in for things leaving. Ease-in-out for continuous motion like carousels. Back, elastic, and bounce add character — use them sparingly, they get annoying fast if overused.
The formulas here match CSS easing keywords and common engine presets, so the curve you see is the curve you get.
Tip: When in doubt, use ease-out for anything that appears and ease-in-out for anything that moves between states. Linear is almost never the right choice for UI.
Frequently asked questions
What is the difference between ease-in and ease-out?
Ease-in accelerates from rest (slow start, fast end) — good for objects leaving. Ease-out decelerates into rest (fast start, slow end) — good for objects arriving. Ease-in-out combines both.
How do I implement easing in my game?
Compute t = elapsed / duration, clamp to [0,1], pass it through the easing function, and use the result to interpolate your value: start + (end − start) × eased(t).
What are the most useful easings?
Quadratic and cubic ease-in/out cover 90% of needs. Add ease-out-back for playful pop and ease-out-elastic for celebratory moments.
Privacy note: easing visualizations happen in your browser. Nothing is uploaded.