Jump to content
Search Community

Struggling to make the overwrite options work

mothervolcano test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



Thank you bringing us GSAP and providing such a great support.


We are struggling a little with making the overwrite options work the way we understood in the documentation they should work. We are designers and not professional programmers.


These are the lines of code we're using to test it:


TweenLite.to( basePath.position, 1, { y: "-=250", delay: 0, overwrite: 0, onOverwrite: reTween } );
TweenLite.to( basePath.position, 2, { y: "+=250", delay: 0.5, overwrite: 0, onOverwrite: reTween } );
We don't seem to be able to prevent the second tween from overwriting the first one half way of it.
What are we missing or doing wrong?
Thank you!

See the Pen VYYXeK by mothervolcano (@mothervolcano) on CodePen

Link to comment
Share on other sites

Hello mothervolcano, and Welcome to the GreenSock Forum!


I looked at your example, but your codepen was missing the GSAP JS script. You can add that in codepen by clicking the gear icon in the JS panel. Type the word "gsap", and the autocomplete will dropdown and you can click and choose the GSAP JS URL.


Also your example is missing CSS and HTML markup. It would be hard to debug your code since you have a number of variables (basePath.position, reTween), without showing the context of what those variables represent.


Here is a video tut by GreenSock on how to create a coddpen demo example.


It doesn't have to be a complex example.. just needs to have your 2 simple tweens which you already have, with those variables defined.. and some HTML and CSS so we can see what you are trying to animate to help you better!



  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Overwriting can be a little tricky. 

Thanks for providing the pen, I edited it so that you can get more value from it. 

TweenLite.set("div", {x:300, y:300})

TweenLite.to("div", 4, { y: "-=250", delay: 0, onOverwrite: reTween } );
TweenLite.to("div", 2, { y: "+=250", delay: 0.5, overwrite: 0 } );

function reTween() {




When one tween overwrites another, the tween that is overwritten gets killed and will stop running.


In your example you were preventing the second tween from overwriting the first. The first tween is still running even when the second tween starts. Since the second tween was created last, it is the last tween to render. The first tween is still doing its job. To prove this, I made your first tween 4 seconds long.


Look at the demo, you will see the first tween starts moving the box up. 

0.5 seconds later, the second tween says to the first tween, "hey buddy, i'm going to move this box down, but i will NOT overwrite you cause I have overwrite:0"

The second tween moves the box down for 2 seconds while the first tween fights to move it up, during this overlap, the second tween wins the render war.

When the second tween ends, you see the box jump up and continue tweening up for the remainder of he first tween's 4 second duration.


This shows that the first tween was not overwritten. Also this is why onOverwrite never fires either, no overwriting takes place.

Give your second tween an overwrite:1 and you will see that it does in fact overwrite the first tween

TweenLite.to("div", 2, { y: "+=250", delay: 0.5, overwrite: 1 } );

Hopefully this makes some sense. Let us know if you need more info.






Be sure to watch the video that shows how to load GSAP into a CodePen and fork one of our starter pens:


  • Like 3
Link to comment
Share on other sites

Thank you so much guys for the amazing support! Really appreciated. It makes us feel we have made the right choice of animation library :)


Here, we have created a pen where the code can be compiled: 

See the Pen GggYog by mothervolcano (@mothervolcano) on CodePen

 (thanks for showing it to us)


I have also included the real context we're using the tween. We're using it with paper.js. 


The example provided by @Diaco.AW works like a charm and its exactly what we're trying to achieve. 


But when applied exactly the same way to the paper.js object it behaves differently as you can see.


Just want to confirm with you that it is not something we're doing wrong with the tween before trying to find help in the paper.js forums.


var size = new Size(50, 50);

var squareBlue = new paper.Path.Rectangle( { x: 100, y:150 }, size);
squareBlue.fillColor = 'blue';
var squareRed = new paper.Path.Rectangle( { x: 100, y: 200 }, size);
squareRed.fillColor = 'red';

var t1 = TweenMax.to( squareRed.position, 2, { y: "-=100" ,onOverwrite:report} );
var t2 = TweenMax.to( squareRed.position, 1, { y: "+=50", delay: 0.5 } );
var t3 = TweenMax.to( '.red', 2, { y: "-=100" ,onOverwrite:report} );
var t4 = TweenMax.to( '.red', 1, { y: "+=50", delay: 0.5 } );

function report() {
console.log("overwrite > t1 = " + t1.progress() );

Link to comment
Share on other sites

Actually the issue may not have nothing to do with the overwrite. We have just tried to chain to tweens to the same objects with enough time in between and what seems it is happening is that by the time the second tween kicks in it send the objects back to the starting position they had before any tweens on them started.


This behaviour does not seem to happen in the examples you have made for us.


Wondering what is happening here.


Code excerpt below and pen here: 

See the Pen OPPBzb by mothervolcano (@mothervolcano) on CodePen

	for ( i; i < num; i++) 
		var d = i * 0.1;
		TweenLite.to( paths[i].position, 1, { y: "-=250", delay: d } );
		TweenLite.to( paths[i].position, 2, { y: "+=250", delay: d + 2, ease: Quad.easeIn } );
Link to comment
Share on other sites

For all the paper.js users out there:


We found a little simple hack that makes it possible to chain tweens to any paper object property without resetting the values.


The trick is to force paper.js to update the tweened property value everytime it is updated. We use a callback function on each time the tween is update and simply pass on the object we want to update using a new object as a "shadow".


Hope this makes sense :)


We're a bit in a hurry to finish and deliver the project we're working on but as soon as possible we'll prepare a little demo on codepen and share it with the community.


function updatePos( target, param, obj )
       target[param] = obj[param]; 

var posValues = { x: 0, y: myPath.position.y } ;

TweenLite.to( posValues, 2, { y: "-=200", delay: -1.8, onUpdate: updatePos, onUpdateParams: [ myPath.position, "y", posValues ] } )  );
  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...