Easing Curve Playground
Drag control points to create custom easing curves, or choose from 12 platform-specific presets. Preview your animation on real UI elements – modal, card, button, dropdown, notification, and page slide.
Easing preset
Curve
cubic-bezier(0.40, 0.00, 0.20, 1.00)
Preview
Confirm action
This can't be undone. Are you sure you want to continue?
Material Design's primary easing.
Best for: Most UI animations
Why Easing Matters
Linear motion looks mechanical and unnatural because nothing in the physical world moves at constant speed. Objects accelerate and decelerate. Easing curves give your animations physical weight – a modal that eases out feels like it arrives; one that moves linearly feels like it was teleported. The difference is subtle but users notice it as "polish" or its absence.
Platform conventions exist for a reason: iOS uses a gentle deceleration that matches its physics engine, Material Design uses distinct curves for entering and exiting elements to reinforce spatial relationships, and Framer's spring curves add organic bounce without JavaScript physics libraries. Matching your animations to platform expectations reduces cognitive load – users' muscle memory already knows how these things should move. Use this tool to visualize, compare, and export the exact curve your design calls for.