Chapter 12: gsap.effects

Core Idea

gsap.effects is where registered custom animation effects (via gsap.registerEffect()) become callable, e.g. gsap.effects.explode(targets, config).

Key Concepts

• Registration required: an effect must first be registered with a name, an effect function, and optional defaults before it appears on gsap.effects.
• extendTimeline: true: when set during registration, the effect also becomes callable directly on any timeline instance, inserting its result 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");

let tl = gsap.timeline();
tl.fade(".box", { duration: 3 }).fade(".box2", { duration: 1 }, "+=2");

• What it demonstrates: registering a reusable "fade" effect once, then calling it both standalone and inline inside a timeline's sequence.

Key Takeaways

1. Effects are a reusability layer: author an animation function once, reuse it with different targets/config anywhere.
2. extendTimeline: true is what makes an effect usable as a timeline method (tl.fade(...)) instead of only gsap.effects.fade(...).

Connects To

• gsap.registerEffect(): where effects are defined before they show up here.