Jump to content
Search Community

Is there a method to view all currently alive tweens?

SteveS test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Solution

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?

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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.
×
×
  • Create New...