Change property values in existing timeline

[swampthang]

I understand that function-based values only run once - when the tweens in a timeline are created. I'm trying to figure out how to update property values in an existing timeline. In the codepen, I have speed and distance fields from which the duration and x properties are taken. I'd like to be able to make changes to the fields and have the property values change based on whatever is entered into the field while the timeline is running. 

 

I've looked at the invalidate() method but trying to figure out how that would work while the timeline is playing.

 

Is this not possible? ANY way of achieving this?

See the Pen yLzMdpW by swampthang (@swampthang) on CodePen

[OSUblake]

This is how you would do invalidate...

let progress = tl.progress();
tl.progress(0);
tl.invalidate();
tl.progress(progress);

 

Just keep in mind that it will jump. Not sure if you were expecting to go smoothly, like say if you change the distance from 40 to 400.

[swampthang]

Thanks, Blake. I had just finished this version about the time you posted this except for the progress reset step. Glad to see I was on the right track.

See the Pen bGoWbde by swampthang (@swampthang) on CodePen

Thing is, I have to kill all the tweens and rebuild them whenever tween durations change because, even though the tween durations change, the timeline keeps the same duration according to the GSDev timeline. I can see why durations would call for that kind of treatment though, unless you have some thoughts about how that could work as well.

Thanks again, as always.

Edited December 16, 2021 by swampthang
clarifying

[OSUblake]

You could change the timeScale instead of messing with the duration. I used 2 because that is what the initial speed value was.

tl.timeScale(2 / speed.value);

 

[swampthang]

Gotcha. Thanks.