garyw Posted July 14, 2020 Share Posted July 14, 2020 I have an SPA app where there can be tweens within each page as well as tweens on the parent shell. Is there any way to tag or group tweens so that I can kill a set of them (for example, all the ones created by a page when the page is unloaded) without killing all of them? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Hey Gary. .exportRoot() is used for this sort of thing sometimes but you might need to be careful with how things are set up. Alternatively keeping track of every tween/timeline that you create is a very solid option. Link to comment Share on other sites More sharing options...
garyw Posted July 14, 2020 Author Share Posted July 14, 2020 I thought of exportRoot(), but it would include tweens that were created prior to any page, correct? And each subsequent call of exportRoot() would also include the prior ones, right? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 7 minutes ago, garyw said: I thought of exportRoot(), but it would include tweens that were created prior to any page, correct? each subsequent call of exportRoot() would also include the prior ones, right? Not sure exactly what you mean by "prior to any page" but yes, they include anything that's been created thus far including previous exportRoot()s. If your animations are restricted to their content sections you could try using .getTweensOf() to get the relevant animations more dynamically: See the Pen mdVGENG?editors=0010 by GreenSock (@GreenSock) on CodePen It might just requires keeping track of the animations yourself though Link to comment Share on other sites More sharing options...
garyw Posted July 14, 2020 Author Share Posted July 14, 2020 Keeping track of the tweens within each page would also require me to track their completions and garbage collect them. I don't see any way to have multiple onComplete callbacks (one for any specific onComplete requirement of the tween and another for the page to track it for garbage collection). It would be much simpler to attach attach a tag to each tween and to get a list of all active tweens with a particular tag. Link to comment Share on other sites More sharing options...
garyw Posted July 14, 2020 Author Share Posted July 14, 2020 getTweensOf() doesn't work if you have tweens on multiple elements within a page and you want to get all of the tweens for the parent page. I would have to keep a list of every element that is tweening. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Can you please create a demo of what you're talking about? It's hard to give feedback in abstract. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 12 minutes ago, garyw said: getTweensOf() doesn't work if you have tweens on multiple elements within a page and you want to get all of the tweens for the parent page. I would have to keep a list of every element that is tweening. Why not? If you use a string selector like I did in the demo you can select all of the child elements... Or you could select using a particular class like "hasGSAPAnimation" or something. Or am I misunderstanding? That'd kind of act like a "tag" as you described above. See the Pen eYJLdgv?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
garyw Posted July 14, 2020 Author Share Posted July 14, 2020 I'll try that, thanks. Link to comment Share on other sites More sharing options...
GreenSock Posted July 14, 2020 Share Posted July 14, 2020 You could use the "data" property as a tag if you want. Then you could use a helper function like this to grab all the [non-completed] animations with a particular data value: const getByData = data => gsap.globalTimeline.getChildren().filter(a => a.data === data); Forked example: See the Pen c2f8865875e42541696f17b97862ea49?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 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