Chapter 391: Handling conflicting tweens

Core Idea

Have you ever been in a situation with GSAP where you needed a higher level of control over conflicting tweens? If you're just creating linear, self-playing animations, the default overwrite mode of false will work just fine for you.

Key Concepts

• false (default): No overwriting occurs and multiple tweens can try to animate the same properties of the same target at the same time. One way to think of it is that the tweens remain "fighting each other" until one ends.
• true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately.
• "auto": Only the conflicting parts of an existing tween will be killed. If tween1 animates the x and rotation properties of a target and then tween2 starts animating only the x property of the same targets and overwrite: "auto" is set on the second tween, then the rotation part of tween1 will remain but the x part of it will be killed.

Code Examples

// Set overwrite on a tween
gsap.to(".line", { x: 200, overwrite: true });

// Set overwrite globally for all tweens
gsap.defaults({ overwrite: true });

// Set overwrite for all tweens in a timeline
const tl = gsap.timeline({ defaults: { overwrite: true } });

• What it demonstrates: typical usage of Handling conflicting tweens in a GSAP animation.

Key Takeaways

1. false (default): No overwriting occurs and multiple tweens can try to animate the same properties of the same target at the same time.
2. true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed…
3. "auto": Only the conflicting parts of an existing tween will be killed.