override override delay ?

[jonForum]

hi, Is there a way in GSAP to properly override the delay?
I am looking for a valid way when I create a tween with the same object reference in memory,
it properly overrides the animation and its properties.
However, I would like the animation to have a starting delay, and this starting delay does not seem to be supported when overriding another tween.
Therefore, I am looking for a behavior that would properly handle the delay when overriding a tween.

 

 

 here test code you can past in your console:

setTimeout( async () => {
    console.log( '💚' );
    const obj = { x:0 };
    gsap.to( obj, { x:1, onStart:()=>console.log( '💨tl1', obj.x ), onUpdate:()=>console.log( 'upd-1', obj.x, ), delay:1 }); // how overide this tween with new delay ? 
    gsap.to( obj, { x:2, onStart:()=>console.log( '💨tl2', obj.x ), onUpdate:()=>console.log( 'upd-2', obj.x ), delay:5 });
}, 1000 );

 

In the console log, I would expect the following result:
 

💨tl1 0
VM33167:4 upd-1 0.16821
VM33167:5 💨tl2 0.16821
VM33167:5 upd-2 0.476336
VM33167:5 upd-2 0.876304
VM33167:5 upd-2 1.304408
VM33167:5 upd-2 1.507727
VM33167:5 upd-2 1.729329
VM33167:5 upd-2 1.83238
VM33167:5 upd-2 1.921491
VM33167:5 upd-2 1.959754
VM33167:5 upd-2 1.987915
VM33167:5 upd-2 1.996086
VM33167:5 upd-2 1.999553
VM33167:5 upd-2 1.999989
VM33167:5 upd-2 2

instead i get this 
 

💨tl1 0
VM33244:4 upd-1 0.039404
VM33244:4 upd-1 0.283607
VM33244:4 upd-1 0.53675
VM33244:4 upd-1 0.675071
VM33244:4 upd-1 0.810253
VM33244:4 upd-1 0.882882
VM33244:4 upd-1 0.942352
VM33244:4 upd-1 0.968883
VM33244:4 upd-1 0.988843
VM33244:4 upd-1 0.995772
VM33244:4 upd-1 0.999423
VM33244:4 upd-1 0.999948
VM33244:4 upd-1 1
VM33244:5 💨tl2 1
VM33244:5 upd-2 1.039404
VM33244:5 upd-2 1.283607
VM33244:5 upd-2 1.547878
VM33244:5 upd-2 1.675071
VM33244:5 upd-2 1.821494
VM33244:5 upd-2 1.882882
VM33244:5 upd-2 1.942352
VM33244:5 upd-2 1.968883
VM33244:5 upd-2 1.989514
VM33244:5 upd-2 1.995772
VM33244:5 upd-2 1.999423
VM33244:5 upd-2 1.999948
VM33244:5 upd-2 2

 

thanks

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[jonForum]

2 minutes ago, GSAP Helper said:

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

ho sorry , oki after many test i just starting found correct solutions:
    `overwrite: 'auto'` => ` overwrite: true,`

See the Pen BabpgPx?editors=0011 by djmisterjon (@djmisterjon) on CodePen

i will need make more deep test to see if this broke behaviors in my app !?
but seem promising, de delay animation seem override
thanks 

[jonForum]

seem fine 

[jonForum]

juste a self note, this will make tl more hard to manage:
example:
so i need to alway think to override complexe tl.
example here the pivot not work because the last crush the first ! am not sure i understand what happen underhood !
It's a shame not to have an understanding to just overwrite the delays and keep the classic behavior on auto.

[GreenSock]

On 1/16/2024 at 7:58 AM, jonForum said:

I am looking for a behavior that would properly handle the delay when overriding a tween.

I'm not sure what you mean by "properly" - from what I can tell, it's doing everything exactly properly. 

 

Are you trying to find all the tweens that affect a particular target and kill them? If so, you can use gsap.killTweensOf(). 

 

If you want to just find the tweens of a particular target, you can use gsap.getTweensOf(). 

 

overwrite: "auto" runs the first time the tween renders, and it finds ONLY the in-progress tweens that are affecting the same individual properties of the same target, and kills those (just the individual properties that overlap). If you set overwrite: true, it'll find all of the tweens of the same target(s) regardless of what properties overlap, and kill them immediately. 

 

So with the above tools, you should be able to accomplish pretty much anything you need.