Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Wilson Kamau


Recommended Posts



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

Link to comment
Share on other sites

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


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


Does that help?

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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



  • Like 1
  • Haha 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.