Jump to content
GreenSock

MindGamer

Stopping all animations within a specific parent element

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

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