Chapter 151: CustomBounce

Core Idea

CustomBounce is a paid GSAP plugin that generates a configurable bounce ease (and an optional synced squash/stretch ease) built on top of CustomEase, instead of using the fixed built-in "bounce" ease.

Key Concepts

• CustomBounce.create(id, vars): registers a bounce ease under id; requires CustomEase to be registered first.
• strength: 0-1, how bouncy the curve is (more bounces at higher values). Default 0.7.
• squash: controls how long the "stuck to the ground" squash phase lasts between bounces. Default 0 (no squash).
• squashID: id assigned to the companion squash/stretch ease, defaults to <id>-squash.
• endAtStart: if true, the ease returns to its starting value at the end (useful for leap-and-land effects).
• String ease shorthand: "bounce(0.5)" or "bounce({strength:0.5, endAtStart:true})" can be used inline without a separate create() call.

Code Examples

gsap.registerPlugin(CustomEase, CustomBounce);

CustomBounce.create("myBounce", { strength: 0.6, squash: 3, squashID: "myBounce-squash" });

gsap.from(".class", { duration: 2, y: -200, ease: "myBounce" });
gsap.to(".class", {
  duration: 2, scaleX: 1.4, scaleY: 0.6,
  ease: "myBounce-squash", transformOrigin: "center bottom",
});

• What it demonstrates: bounce and squash/stretch are two separate, synchronized tweens driven by the same CustomBounce.create() call.

Reference Tables

Option	Type	Default	Notes
strength	Number	0.7	higher = more bounces
endAtStart	Boolean	false	return to start value at the end
squash	Number	0	duration of squash phase between bounces
squashID	String	<id>-squash	id of the generated squash ease

Key Takeaways

1. CustomBounce always requires CustomEase to be registered too.
2. The squash/stretch effect needs a second, separate tween running in parallel with the bounce tween, sharing the same duration.
3. getSVGData() (inherited from CustomEase) can render any CustomBounce ease as an SVG path for visualization.

Connects To

• CustomEase: CustomBounce is built on top of it and shares its getSVGData() method.
• CustomWiggle: sibling paid ease plugin with the same registration pattern.