Chapter 150: Easing (Overview)

Core Idea

The ease property is the primary lever for a tween's feel — it controls the rate of change over time, independent of duration or target values.

Key Concepts

• Built-in families: power0(linear) through power4, plus back, bounce, circ, elastic, expo, sine, and steps(n).
• Modifiers: append .in, .out, or .inOut to control which portion of the tween the ease effect emphasizes (e.g. "power2.out").
• Custom eases: CustomEase, CustomBounce, CustomWiggle, RoughEase, SlowMo, ExpoScaleEase, and SteppedEase extend beyond the built-ins for specialized effects.

Code Examples

gsap.to(".box", { x: 100, duration: 1, ease: "power2.out" });

Connects To

• gsap.parseEase() / registerEase(): reading and defining ease functions programmatically.
• CustomEase / CustomBounce / CustomWiggle / RoughEase / SlowMo / SteppedEase: the specialized ease plugins, each with its own chapter.