Jump to content
Search Community

How to group tweens?

garyw test
Moderator Tag

Recommended Posts

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

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

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

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

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

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?

  • Like 1
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...