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 like banner ads, chances are the default overwrite mode of false will work just fine for you. However, in cases where you are creating tweens dynamically based on user interaction or random events you may need finer control over how conflicts are resolved.
Overwriting refers to how GSAP handles conflicts between multiple tweens on the same properties of the same targets at the same time. The video below explains GSAP’s overwrite modes and provides visual examples of how they work.
Want to master GSAP? Enroll in CreativeCodingClub.com and unlock 5 premium GreenSock courses with over 90 lessons. New lessons like this one are added weekly to keep your learning fresh.
GSAP’s 3 Overwrite Modes
-
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 andoverwrite: "auto"is set on the second tween, then the rotation part of tween1 will remain but the x part of it will be killed.
Setting Overwrite Modes
// 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 } });
Below is the demo used in the video. Open it in a new tab to experiment with the different overwrite modes
Hopefully this article helps you better understand how much control GSAP gives you. Overwrite modes are one of those features that you may not need that often, but when you do, they can save you hours of trouble writing your own solution.
For more tips like this and loads of deep-dive videos designed to help you quickly master GSAP, check out CreativeCodingClub.com. You’re going to love it.
-
8
.png.fc7f258b568e575135fbb300dc15f43d.png)
Recommended Comments
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 accountSign in
Already have an account? Sign in here.
Sign In Now