Easing functions control how animations progress over time. They’re used primarily with Keyframe Automation to create natural, appealing movements instead of rigid, mechanical ones.
What are easing functions?
Easing functions determine the rate of change of a value over time. Instead of a value changing at a constant rate (linear), easing functions can make it accelerate, decelerate, bounce, or follow other patterns.
Think of easing functions as describing the “physics” of your animation:
- Linear - Constant speed (rarely looks natural)
- Ease In - Starts slow and accelerates (like a car starting)
- Ease Out - Starts fast and decelerates (like a car braking)
- Ease In Out - Starts slow, speeds up, then slows down (smooth, natural movement)
Available easing functions
Vizzy offers a comprehensive set of easing functions, each with its own unique characteristics:
Basic
- Linear - Constant speed from start to finish
Quad, Cubic, Quart, Quint
These functions use different power equations (x², x³, x⁴, x⁵) to create progressively more pronounced easing effects:
- Ease In Quad/Cubic/Quart/Quint - Increasingly stronger acceleration
- Ease Out Quad/Cubic/Quart/Quint - Increasingly stronger deceleration
- Ease In Out Quad/Cubic/Quart/Quint - Increasingly stronger acceleration and deceleration
Sine
Based on sine waves, these create smooth, gentle transitions:
- Ease In Sine - Gentle acceleration
- Ease Out Sine - Gentle deceleration
- Ease In Out Sine - Gentle acceleration and deceleration
Circular
Based on circular functions, these create slightly different curves:
- Ease In Circ - Circular acceleration
- Ease Out Circ - Circular deceleration
- Ease In Out Circ - Circular acceleration and deceleration
Exponential
These create dramatic, exponential changes:
- Ease In Expo - Dramatic acceleration
- Ease Out Expo - Dramatic deceleration
- Ease In Out Expo - Dramatic acceleration and deceleration
Back
These functions slightly overshoot their targets before settling:
- Ease In Back - Slight pullback before moving forward
- Ease Out Back - Overshoots target then settles back
- Ease In Out Back - Combination of both effects
Elastic
These create spring-like, elastic movements:
- Ease In Elastic - Builds up tension then snaps
- Ease Out Elastic - Overshoots with elastic wobble
- Ease In Out Elastic - Combination of both effects
Bounce
These create bouncing effects:
- Ease In Bounce - Multiple bounces before reaching the target
- Ease Out Bounce - Reaches target then bounces multiple times
- Ease In Out Bounce - Combination of both effects
Choosing the right easing function
The right easing function depends on the effect you’re trying to create:
- For natural movement, try Ease Out Cubic or Ease In Out Sine
- For bouncy effects, use Ease Out Bounce or Ease Out Elastic
- For dramatic entrances, try Ease Out Back or Ease Out Expo
- For subtle movements, use Ease In Out Sine or Ease In Out Quad
Visual reference
If you want to see how these easing functions look visually, look below or visit easings.net for interactive examples of each function.
Experiment
Don’t be afraid to experiment with different easing functions to find the perfect feel for your animation. The right easing can make the difference between a mechanical-looking animation and one that feels natural and polished.