Registering an Effect but with Unique Delay Values

[devin1229]

I'm wondering if it's possible to use the registerEffect functionality to repeat animations, but with each animation having its own delay value. I'm trying to create a series of animations that fire off in sequence vs. all at once. I thought by using something like

        gsap.effects.pop('.circle', {
          delay: 1
        });
        gsap.effects.pop('.square', {
          delay: 5
        });

Would work, but it doesn't. Is there an alternative way to do this, or is something like this completely unavailable?

See the Pen BaRbpYq by devin1229 (@devin1229) on CodePen

[GreenSock]

That's because you didn't plug it into the tween that you're returning

 

delay: config.delay,

See the Pen JjNzzaE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can put anything you want into the config. Just make sure you use it inside your effect in whatever way you intend. 

[nico fonseca]

Hey @devin1229 you can access to the delay property in the same way you did with the duration, so you can do something like this: 
 

return gsap.to(targets, {
  duration: config.duration,
  scale: 1.3,
  ease: "power.inOut",
  yoyo: true,
  repeat: 1,
  delay: config.delay,
});

or you can add your effect to a timeline, for example:

//with extendTimeline: true
var tl = gsap.timeline();
tl.yourEffect(".class", {configProp:"value"}, "+=position");

//without extendTimeline: true, you'd have to do this to add an instance to the timeline:
tl.add( gsap.effects.yourEffect(".class", {configProp:"value"}), "+=position");

 

[devin1229]

I clearly need new glasses. Thank you @nicofonseca and @GreenSock