SteveS Posted June 4, 2022 Share Posted June 4, 2022 Is there a way to find all currently active tweens? Active meaning haven't been sent to garbage collection. The only reason is to make it easier to make sure everything is cleaned up in react. When I navigate to a different page, it would be great if I could console log something like gsap.getAlive() to return an array of all gsap elements currently "alive", pretty much ScrollTrigger.getAll() but for everything in the GSAP engine. Thanks Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 4, 2022 Solution Share Posted June 4, 2022 Sure, there's a gsap.globalTimeline which is just a timeline, thus you can use its getChildren() method to get whatever you want. gsap.globalTimeline.getChildren(true, true, true); Just beware that delayedCalls are just zero-duration tweens with an onComplete and a delay, so those could show up in there too. Does that help? 1 Link to comment Share on other sites More sharing options...
SteveS Posted June 4, 2022 Author Share Posted June 4, 2022 I was looking at the docs for the globalTimeline and I must have just missed it. That works. Now I can see everything I missed. Out of curiosity, is there any reason to not use gsap.globalTimeline.clear() on every "page load"? Seems like an easy way to guarantee there are no stragglers. Link to comment Share on other sites More sharing options...
SteveS Posted June 4, 2022 Author Share Posted June 4, 2022 Another question, what should I be expecting gsap.globalTimeline.getChildren(true,true,true) to be returning if I have done everything correctly? It seems like it will never really return nothing unless I clear the timeline entirely. Link to comment Share on other sites More sharing options...
GreenSock Posted June 4, 2022 Share Posted June 4, 2022 There are tweens that get created by things like ScrollTrigger and ScrollSmoother internally, like for scrubbing (though they shouldn't matter if you're killing everything anyway). If you think there are things sticking around that shouldn't, I'd be happy to take a look at a minimal demo. In theory, I don't see any problem with calling gsap.globalTimeline.clear() if you truly want to nuke everything. Link to comment Share on other sites More sharing options...
SteveS Posted June 4, 2022 Author Share Posted June 4, 2022 Is it possible I'm not killing everything then? I don't have the time for a demo right now, but basically there is an inconsistent number of tweens reported navigating to and from the same page to one with nothing GSAP related on it. If I'm properly cleaning up my tweens, would I expect some number of children to remain on the globalTimeline? Link to comment Share on other sites More sharing options...
GreenSock Posted June 4, 2022 Share Posted June 4, 2022 Sorry, I'm having a tough time understanding exactly what you're asking - are you wanting me to tell you if you're cleaning things up properly in your project? Or maybe you're asking if I can think of a reason why you'd be getting an inconsistent number of tweens in your project? I apologize - I'd love to help but it's just really tough to troubleshoot blind. 🤷♂️ Link to comment Share on other sites More sharing options...
SteveS Posted June 4, 2022 Author Share Posted June 4, 2022 When cleaning up a tween from an effect, the way to do it is indicated in the post: useEffect(()=>{ const tween = gsap.to(...) return () => { tween.kill() } }, []) After tween.kill(), what should console.log(gsap.globalTimeline.getChildren(true, true, true)) read? I would expect it to be an empty array. I'm reasoning that if I unmount several components, and then call gsap.globalTimeline.getChildren(true, true, true) if it has an array of 20 items in it, something is not being correctly cleaned up. Is that true? I'm asking because I think I am correctly cleaning up everything using the example above, yet when I navigate to another page (unmounting the first one) I magically have ten unexpected items coming from gsap.globalTimeline.getChildren(true, true, true). Is this cause for me to more closely look at how I am cleaning up my tweens? Or are these residual objects that I don't need to worry about? Link to comment Share on other sites More sharing options...
GreenSock Posted June 4, 2022 Share Posted June 4, 2022 Yeah that sounds a little funky to me. It's normal to have ScrollTrigger/ScrollSmoother create a delayedCall() on startup but if you're seeing 10 that sounds odd to me. You can set a "data" value on your tweens to help track them better so that when you console.log(), you're just seeing yours: gsap.to(..., {data: "mine", ...}); gsap.to(..., {data: "mine", ...}); console.log(gsap.globalTimeline.getChildren(true, true, true).filter(t => t.data === "mine").length) 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