Returns : *

self (makes chaining easier)

Details

Using .registerEffect, you can author a function that does a custom animation and then make it into a named effect that can be called anytime with new targets and configurations.

So, for example, think of writing an "explode" effect yourself (a function that accepts targets and a configuration object and spits back an animation/timeline). You define it once, and call it anytime, like:

gsap.effects.explode(".class", {speed: 25});

Here’s a super-simple "fade" effect to show the concept:

// register the effect with GSAP:
gsap.registerEffect({
    name: "fade",
    defaults: {duration: 2}, //defaults get applied to the "config" object passed to the effect below
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, opacity: 0});
    }
});
// now we can use it like this:
gsap.effects.fade(".box");

GSAP is providing 3 key services here:

• It parses the “targets” into an array. So if selector text is passed in, it becomes an array of elements passed to the effect function.
• It applies defaults to the vars object of each tween for you. No need to add a bunch of if statements or do the defaults yourself.
• It provides a centralized way of registering/accessing these “effects”.

You can think of it almost like jQuery plugins, but for GSAP-based animation effects.