Jump to content

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

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

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.