Multiple .to() on the same timeline modifying the same property

[GlennarN]

Hello,

 

I feel like I am missing something or misunderstanding something fundamentally here. I am trying to achieve something like this:

 

const tl = gsap.timeline();

tl.from(object, { prop: initValue }); 

tl.to(object, { prop: firstValue, duration: firstDuration });

tl.to(object , { prop: secondValue, duration: secondDuration});

etc.

 

Basically, I am trying to modify the same property in increments one after the other , however it seems like only the first .to() will be run and the rest does not. I guess it might be possible to combine these motions somehow in a curve or something (do tell if so), but I don't understand why something like this wouldn't be possible? Maybe it is and I am just missing something...

 

BR

GlennarN

 

[akapowl]

 

Hey @GlennarN - welcome to the forums.

 

22 minutes ago, GlennarN said:

Maybe it is and I am just missing something...

 

If I am not totally mistaken on what it is, you are asking about, it really should be possible.

 

See the Pen dd279d39d3a377772e04ef9a2dde953c by akapowl (@akapowl) on CodePen

 

 

Could you please provide a minimal demo that show or clarifies the issue you are running into?

 

[iDad5]

9 minutes ago, akapowl said:

Could you please provide a minimal demo that show or clarifies the issue you are running into?

That surely would help.
And I totally agree with @akapowl.

As I myself have far less experience and expertise with gsap than akapowl, I stumbled upon something that you might have not considered. You don't provide a duration for your 'from' tween, that means that a default duration is applied (if you don't want that you should use gsap.set()). Depending on which property you want to to animate, I (blindly) guess that It could be that this can be cause for a behavior that you didn't expect. But obviously that's just a wild guess.

[GlennarN]

Thanks for both of your responses.

 

I had to ask this question just to sanity check myself and it does indeed work. We at my company are in the process of switching over to GSAP in a larger application so there is some porting needed. Most of our stuff is in the timebase of milliseconds and I thought I had already ported over all of our values to seconds but I had missed a spot 🤦‍♂️ So the animation was running thousand times slower and getting cut off before it got a chance to finish.

 

Sorry for this lame question, **** just happens sometimes.

 

BR

GlennarN