aok Posted January 15, 2021 Share Posted January 15, 2021 I always tend to have a problem when I fire a gsap stagger/animation from a toggle (run when toggle on and kill/stop when toggle off) as if the user toggles super quickly (exhaustive testing) it won't kill/clear in time etc and I'm left with some items staggered in and others not. My thinking would be to create some sort of timeout to prevent this but I'm not sure. This is what I have for my stagger. staggerMenuItems: function(open, $elem) { let $elems = $elem.querySelectorAll('li'); if (open) { gsap.to($elems, { visibility: 'visible', stagger: -0.5, delay: 0.5 }); } else { gsap.set($elems, { clearProps: 'all' }); } } Any thoughts on how to improve this? See the Pen GRjPZOK by richardcool (@richardcool) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2021 Share Posted January 15, 2021 Hey aok. You should kill off the tween if you don't want it to keep running: See the Pen WNGLwKR?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Solution mikel Posted January 15, 2021 Solution Share Posted January 15, 2021 Hey @aok, 'Toggling' a reversed timeline shouldn't be a problem here. See the Pen oNLNVJE?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
aok Posted January 15, 2021 Author Share Posted January 15, 2021 38 minutes ago, ZachSaucier said: Hey aok. You should kill off the tween if you don't want it to keep running: As simple as that! Thanks, @ZachSaucier 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