Chapter 152: CustomEase

Core Idea

CustomEase is a paid GSAP plugin that lets you define literally any easing curve as an SVG-style cubic bezier path (drawn visually in GSAP's Ease Visualizer or pasted in), instead of picking from the built-in preset eases.

Key Concepts

• CustomEase.create(id, data): registers a custom ease under id from an SVG cubic-bezier path string; reference it later as ease: "id".
• cubic-bezier() strings: CustomEase also accepts standard 4-number cubic-bezier() values (e.g. from cubic-bezier.com) directly.
• getSVGData(easeOrId, config): returns/renders the SVG path data for any ease (custom or standard) at a given width/height, useful for visualizing curves.
• Ease Visualizer: the interactive GUI (part of the GSAP site) for drawing/editing a CustomEase and copying its data string.
• Naming caveat: naming a CustomEase the same as a built-in ease (e.g. "expo") silently overwrites that standard ease.

Code Examples

gsap.registerPlugin(CustomEase);

CustomEase.create(
  "hop",
  "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

gsap.to(element, { duration: 1, y: -100, ease: "hop" });

• What it demonstrates: create the ease once (up front, for performance), then reference it by string id in any tween.

Anti-patterns

• Registering the plugin but forgetting gsap.registerPlugin(CustomEase) in a build with tree-shaking: the plugin gets dropped silently in production even though it works in dev.

Key Takeaways

1. Create eases once at load time; runtime tween calls just reference the string id, which is cheap.
2. Any SVG path using M/C/S/L/Z cubic-bezier commands is accepted and gets normalized internally.
3. CustomBounce and CustomWiggle are built on top of CustomEase and require it to be registered as well.

Connects To

• CustomBounce, CustomWiggle: both extend CustomEase and share its getSVGData() method.
• gsap.registerPlugin(): required for any paid/optional plugin, including CustomEase, to survive tree-shaking.