Chapter 174: Kill All Tweens of Child Elements (Helper)

Core Idea

A helper that kills every currently active tween whose target is a DOM descendant of a given ancestor element, without needing a reference to each individual tween.

Key Concepts

• Walks gsap.globalTimeline.getChildren() (every active tween/timeline) and, for each tween's targets, checks ancestor.contains(target) before killing that specific target on that tween.
• Only affects targets that are DOM nodes (e.nodeType check), leaving non-DOM tweened objects untouched.

Code Examples

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))
    );
}

• What it demonstrates: using gsap.globalTimeline as a registry of every running animation to selectively kill by DOM containment.

Key Takeaways

1. Useful for cleanup when removing/replacing a whole DOM subtree (e.g. in a component-based UI) without tracking every tween manually.

Connects To

• gsap.globalTimeline, Tween.kill(): the core APIs this helper composes.
• gsap.context(): the officially supported, broader cleanup mechanism for component-scoped animations (React/Vue).