Jump to content

Returns : *

self (makes chaining easier)


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:

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

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

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

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.

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.