Stopping all animations within a specific parent element

[MindGamer]

I have a lot of pages with different interactive applications that use Tweens but aren't part of a timeline.

 

If all of those tweening elements were contained within a parent div, like this:

 

<div id="gsaparea">

    <!-- all active tweens live here -->

</div>

 

Is it possible to kill all tweening elements that are children of that div, by referencing that div id somehow? What I'm hoping for is a function like killTweensInside("divname");

 

Is that possible?

 

Thanks in advance.

 

 

[ZachSaucier]

Hey MindGamer.

 

You could use .getTweensOf() and pass in all of your children elements. Then loop through the array it gives you and kill them.

[GreenSock]

Here's a helper function that wouldn't require that you figure out all the children - you could just pass in the parent element (or selector text): 

function killChildTweensOf(ancestor) {
  ancestor = gsap.utils.toArray(ancestor)[0];
  gsap.globalTimeline.getChildren(true, true, false).forEach(tween => tween.targets().forEach(e => e.nodeType && ancestor.contains(e) && tween.kill(e)));
}

And here's a simple demo: 

See the Pen yLOPRQG?editors=0010 by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

23 minutes ago, GreenSock said:

ere's a helper function that wouldn't require that you figure out all the children - you could just pass in the parent element (or selector text)

Might be good for the helper functions page.