Jump to content
Search Community

Stopping all animations within a specific parent element

MindGamer test
Moderator Tag

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

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

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