Type : Array

gsap.effects is the property that you access to add or access GSAP effects.

Effects are a way for you to create an animation once and then apply that same animation to multiple elements. This is different from tweening an array or selector because these effects can be tweened individually. In other words, it's a way to conveniently create individual tweens for many elements.

Effects are also easily shared between different projects and people. To view effects that have already been created, check out the CodePen collection.

Basic usage

// 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");