CustomStaggerOnComplete

[Wilson Kamau]

Hello, 

 

I am struggling to create a custom stagger that retains the onComplete functionality built into the the OG stagger property. How do I designate a function to run after each custom stagger? I didn't know whether this question required a codepen demo or not so I threw something together anyway. Is there a way to configure each custom stagger with an onComplete function? Let me know if clarification is needed. Thanks GSAP team!

See the Pen zYEeXZj?editors=1111 by wilsonknjoroge98 (@wilsonknjoroge98) on CodePen

[GreenSock]

There isn't a simplistic solution for that, but I whipped up a helper function for you: 

 

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

 

function addStaggerCallback(animation, vars) {
  animation.getChildren && animation.getChildren(true, true, false).forEach(t => addStaggerCallback(t, vars));
  animation.timeline && animation.timeline.getChildren(false, true, false).forEach(t => {
    for (let p in vars) {
      t.eventCallback(p, vars[p], t.targets());
    }
  });
}

Usage:

let flip = Flip.from(..., {stagger: yourFunc});
                     
addStaggerCallback(flip, {
  onComplete: target => console.log("done!", target),
  onStart: target => console.log("started", target)
});

 

Does that help?

[PointC]

It's been a minute since Jack has "whipped up" a new helper function. Time to dust off this old meme. 

 

[Wilson Kamau]

This is exactly what I was looking for. Thank you!