Chapter 21: gsap.killTweensOf()

Core Idea

gsap.killTweensOf() kills all tweens (or only specific properties of them) affecting a given target, including tweens that haven't started yet.

Key Concepts

• Second parameter: a comma-delimited property list to kill only those tweening properties, leaving other properties of the same tween running.
• Selector text / arrays: accepts a CSS selector string, "*" for all DOM-targeted tweens, or an array of targets.
• Delayed calls: since delayedCall() targets and completes on the same function, killTweensOf(myFunction) cancels a pending delayed call.
• Not-yet-started tweens: killing works even if the tween's delay hasn't elapsed yet.

Code Examples

gsap.killTweensOf(".myClass"); // kill everything tweening elements with this class
gsap.killTweensOf(myObject, "opacity,x"); // kill only these two properties
gsap.killTweensOf(myFunction); // cancel a pending delayedCall

• What it demonstrates: killing all tweens of a class selector, killing only specific properties of an object's tween, and canceling a delayed call by its function reference.

Key Takeaways

1. Property-scoped killing lets one tween keep animating other properties while you stop just one.
2. Works retroactively on tweens still waiting on their delay, not only ones already playing.

Connects To

• gsap.getTweensOf(): same target-matching logic, for inspecting instead of killing.
• gsap.delayedCall(): commonly cancelled via this method instead of keeping a reference.