Kill all tweens applied to child elements of a given target
You can kill all tweening elements that are children of a given target by using this function:
Demo
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))
);
}
<div class="group">
<div class="box blue"></div>
<div class="box green"></div>
</div>
<div class="box red"></div>.box {
margin: 10px;
}gsap.to(".red, .blue", {x: 500, duration: 2, ease: "none"});
gsap.to(".green", {x: 500, duration: 2, ease: "none"});
// after 1 second, kill tweens of elements inside ".group" <div> (blue and green)
gsap.delayedCall(1, () => killChildTweensOf(".group"));
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)));
}