Chapter 25: gsap.registerEase()

Core Idea

gsap.registerEase() registers a custom easing function under a name so it can be referenced like any built-in ease string.

Key Concepts

• Ease function signature: (progress) => number — takes a 0-1 progress value and returns the eased value (usually 0-1, but can exceed that range like elastic).
• Usage: once registered, reference it by name in the ease property of any tween.

Code Examples

gsap.registerEase("myEaseName", function (progress) {
  return progress; // linear
});

gsap.to(".class", { x: 100, ease: "myEaseName" });

• What it demonstrates: defining a trivial linear ease and applying it by name in a normal tween.

Key Takeaways

1. Custom eases integrate exactly like built-in ones — no special syntax needed at the call site.
2. The function itself controls the entire feel of the animation curve; test with something more interesting than linear.

Connects To

• gsap.parseEase(): converts an ease string (built-in or custom) into its underlying function.