Wilson Kamau Posted June 9, 2022 Share Posted June 9, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 9, 2022 Share Posted June 9, 2022 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? 4 1 Link to comment Share on other sites More sharing options...
PointC Posted June 9, 2022 Share Posted June 9, 2022 It's been a minute since Jack has "whipped up" a new helper function. Time to dust off this old meme. 1 3 Link to comment Share on other sites More sharing options...
Wilson Kamau Posted June 10, 2022 Author Share Posted June 10, 2022 This is exactly what I was looking for. Thank you! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now