Easing
The acceleration and deceleration of animated movement that creates natural, polished motion.
What is Easing?
Easing is the technique of varying the speed of animation over time to create natural, appealing motion. Rather than moving at constant speed (linear motion), eased animation accelerates and decelerates in ways that mimic real-world physics and human perception of movement.
The concept of easing derives from fundamental physics. Objects in the real world do not start and stop instantaneously. They accelerate from rest, maintain velocity, and decelerate before stopping. Our eyes and brains are attuned to this natural motion, making linear animation feel mechanical and unnatural.
In motion graphics, easing transforms amateur-looking animation into professional work. The difference between a logo that slides onto screen linearly versus one that eases in with gradual deceleration is immediately apparent. Easing adds polish, professionalism, and emotional quality to animated content.
There are several fundamental easing types. Ease-in starts slowly and accelerates, appropriate for objects beginning to move. Ease-out starts quickly and decelerates, suitable for objects coming to rest. Ease-in-out combines both, creating smooth starts and stops. Beyond these basics, countless custom easing curves enable specific timing effects.
How Does Easing Work?
Easing is implemented through animation curves that modify the relationship between time and animated values. In linear animation, the relationship is direct: 50% through the duration means 50% of the value change. Easing bends this relationship.
For an ease-out curve, the animation covers more ground early and less later. At the 50% time mark, the value might already be at 80%. This creates the appearance of deceleration as the rate of change slows toward the end.
Mathematically, easing functions transform the time value before applying it to the animation. Common functions include quadratic (t²), cubic (t³), quartic (t⁴), and more complex formulas. Each produces different acceleration characteristics.
Bezier curve easing is the most flexible approach, allowing designers to define custom curves by manipulating control points. The CSS cubic-bezier function and After Effects graph editor both use this method, providing infinite easing possibilities.
Key Benefits and Importance
- Creates natural, believable movement that viewers instinctively accept
- Adds professional polish that distinguishes quality work
- Improves user experience in interactive and UI animation
- Enables emotional expression through timing choices
- Makes animation more engaging and watchable
- Reflects understanding of physics and motion principles
Common Use Cases
- •All motion graphics and animation work
- •User interface transitions and micro-interactions
- •Logo animations and brand identity motion
- •Kinetic typography and text animation
- •Infographic and data visualisation animation
- •Website and app animation
Best Practices for Easing
Develop a consistent easing vocabulary for your project or brand
Use stronger easing for larger movements, subtler for small adjustments
Consider cognitive load when choosing easing for functional UI
Test animation at various playback speeds to evaluate easing choices
Reference existing easing libraries like Penner equations for consistency
Document easing choices in style guides for team alignment
Industry Applications
Easing principles apply across all motion graphics work but manifest differently in various contexts. Broadcast graphics often use punchy, energetic easing to maintain viewer attention. Shorter, snappier ease-outs keep the pace exciting.
User interface design carefully considers easing for usability. Material Design specifies particular Bezier curves for different interaction types, recognising that inappropriate easing can make interfaces feel sluggish or jarring.
Film title sequences use easing expressively to match cinematic tone. Thriller titles might use aggressive, sudden easing. Romance films might favour gentle, flowing transitions. The easing supports narrative mood.
Advertising motion graphics strategically applies easing for persuasion. Price reveals often use anticipation-building ease-in followed by impactful ease-out. Product animations ease in ways that suggest quality and desirability.
Technical Details
Standard easing functions are mathematically defined for consistent implementation across platforms. Robert Penner's easing equations, published in 2001, remain the industry reference.
Linear: f(t) = t Ease-in (quadratic): f(t) = t² Ease-out (quadratic): f(t) = 1 - (1-t)² Ease-in-out (quadratic): f(t) = t < 0.5 ? 2t² : 1 - pow(-2t + 2, 2) / 2
More aggressive easing uses higher powers: cubic (t³), quartic (t⁴), quintic (t⁵). Specialised functions like bounce and elastic add overshoot and oscillation.
Bezier easing uses the cubic-bezier(x1, y1, x2, y2) format, where the parameters define control point positions. Common values include ease (0.25, 0.1, 0.25, 1) and ease-in-out (0.42, 0, 0.58, 1).
Pro Tips and Common Mistakes
- →Never use linear easing for organic or natural motion
- →Use ease-out for elements appearing on screen to create a welcoming feel
- →Use ease-in for elements leaving to create a sense of departure
- →Match easing character to the content mood and brand personality
- ✗Using linear timing for everything, creating robotic motion
- ✗Over-easing to the point where animation feels sluggish
- ✗Using the same easing for all animations regardless of context
- ✗Ignoring easing on secondary animated elements
Frequently Asked Questions About Easing
Related Motion Graphics Terms
Animation Curve
A graph that controls the timing, speed, and interpolation of animated properties over time.
Bezier Curve
A mathematical curve defined by control points, used for creating smooth paths and animation timing.
Keyframe
A marked point in time that defines a specific property value, forming the foundation of all digital animation.