Chapter 26: gsap.registerEffect()

Core Idea

gsap.registerEffect() wraps a reusable animation function under a name, so it can be invoked later via gsap.effects.<name>() with new targets and config.

Key Concepts

• effect(targets, config): the function you author, returning a Tween/Timeline; config is whatever properties you decide the caller can pass.
• defaults: fallback values applied to config when the caller omits them.
• extendTimeline: true: also makes the effect callable directly as a timeline method (tl.myEffect(...)), inserted at the position you specify.

Code Examples

gsap.registerEffect({
  name: "fade",
  effect: (targets, config) => gsap.to(targets, { duration: config.duration, opacity: 0 }),
  defaults: { duration: 2 },
  extendTimeline: true,
});

gsap.effects.fade(".box");

• What it demonstrates: defining and registering a minimal reusable "fade" effect with a default duration.

Key Takeaways

1. Effects are the building block for a shared animation library/design system across a codebase or team.
2. extendTimeline: true is what turns an effect into a first-class timeline method, not just a standalone gsap.effects.x() call.

Connects To

• gsap.effects: where registered effects become callable.