Easing functions control how animations accelerate and decelerate, transforming mechanical motion into natural, organic movement.
Hover over each card to see the easing in action
Linear
linear
Ease In
ease-in
Ease Out
ease-out
Ease In Out
ease-in-out
Ease In Quad
cubic-bezier(0.55, 0.085, 0.68, 0.53)
Ease Out Cubic
cubic-bezier(0.215, 0.61, 0.355, 1)
Ease In Back
cubic-bezier(0.6, -0.28, 0.735, 0.045)
Ease Out Back
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Spring
cubic-bezier(0.34, 1.56, 0.64, 1)
The science of natural motion
Real objects don't move at constant speed—they accelerate and decelerate.
Different curves convey different feelings—bouncy, smooth, urgent, relaxed.
Ease-out draws attention to the destination; ease-in highlights the origin.
Proper easing is what separates amateur from professional animation.
"Understanding easing was the turning point in my animation skills. This tool made it intuitive to experiment and find the perfect curve."
Motion Designer
Explore the full easing library
Get Started Free