Chapter 55: Easing functions

Core Idea

Every easing function built into Motion: easeInOut, backOut, circIn, anticipate, steps and cubicBezier, plus modifiers to reverse or mirror a curve.

Key Concepts

• Functions: Motion provides a number of built-in easing functions:
• cubicBezier: cubicBezier provides very precise control over the easing curve.
• steps: steps creates an easing with evenly-spaced
• Modifiers: Easing modifiers can be used to create mirrored and reversed easing functions.
• reverseEasing: reverseEasing accepts an easing function and returns a new one that reverses it.
• mirrorEasing: mirrorEasing accepts an easing function and returns a new one that mirrors it.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

// Named easing
ease: "easeIn"

// Bezier curve
ease: [0.39, 0.24, 0.3, 1]

• What it demonstrates: Core usage pattern for Easing functions.

Key Takeaways

1. Easing functions supports Functions.
2. Easing functions supports cubicBezier.
3. Easing functions supports steps.

Connects To

• Tween: related Motion doc page.
• animate(): related Motion doc page.
• React motion component: related Motion doc page.
• Motion AI Kit. MotionScore for Agents, current docs and CSS springs: related Motion doc page.
• spring: related Motion doc page.