Easing Functions: The Secret to Smooth Animation
The secret ingredient that makes animations feel alive
The secret ingredient that makes animations feel alive
Compare two balls moving the same distance. One uses linear movement, the other uses easing. Which feels more natural?
Same speed the whole way. Looks robotic and unnatural. Rarely seen in real life.
Accelerates and decelerates smoothly. Feels organic because that's how real objects move!
Before we ease, we need to understand lerp - the foundation of all animation. It blends between two values based on a progress value (t) from 0 to 1.
At the very beginning - returns the start value
Halfway through - returns the middle value
At the end - returns the end value
Ease In starts slowly and accelerates. Perfect for objects being thrown or dropped - they pick up speed as they go!
Ease Out starts fast and decelerates. Perfect for UI elements sliding into place or a ball coming to rest.
Menus slide in quickly then settle smoothly - that's Ease Out!
Toast messages that pop in and ease to their final position use Ease Out.
Ease In-Out combines both - slow start, fast middle, slow end. The most natural-looking motion for many animations.
Beyond basic easings, there are many specialized functions. Click any to see it in action!
Like a ball bouncing to rest. Great for playful UI and game juice!
Overshoots then oscillates like a spring. Adds energy and life!
Pulls back before going forward (or overshoots). Creates anticipation!
Watch different easings race! They all take the same time but look completely different.
Drag the control points to create your own custom easing! Bezier curves let you design exactly the motion you want.
CSS uses cubic-bezier(x1, y1, x2, y2) for custom easing in transitions!
The two control points define the curve shape. X is time, Y is progress.
Design your own animation! Choose an easing, property, and watch your creation come to life.
You've learned the secret that separates amateur animations from professional ones. Easing makes everything feel alive!
Linear interpolation blends between values - easing just curves the progress!
Objects accelerate like they're building momentum.
Objects decelerate like they're coming to rest.
The most natural motion - accelerate then decelerate.
Bounce, Elastic, and Back add life and game feel!
Design custom curves for exactly the motion you need.
Put your new knowledge into practice!