Dynamicly updating timeline properties

[schonert 0 Likes (Newbie)]

Hey there guys!

 

 

I've spent a good deal of time trying to figure this out - so now I've decided to ask a bit of help.

 

When running and reversing timelines, the properties might change. Is there a way of updating these properties on the fly?

 

I've come up with a small example, check out the codepen!

 

Please let me know if you need me to clarify anything

See the Pen vpbsA by anon (@anon) on CodePen

[Rodrigo 3,490 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Sorry, there's no way to do what you're trying, without creating the timeline again.

 

For optimization reasons GSAP records the starting values of the properties being animated and the final values passed in the config object and iterates between them, so once an instance is created it stays with those values and the only option is to create it again.

 

What you can do is store the current time or progress in a variable, create the new timeline and set it time/progress to the value you recorded:

var tl = new TimelineLite();

function changeSize()
{
  var currentProgress = tl.progress()

  //clear the timeline
  tl
    .clear()
    .to(inner, 1, {vars})
    .progress(currentProgress);
}

Remember that the methods are chainable, so that helps keeping things simple.

[GreenSock 12,412 Likes (Superhero)]

You can invalidate() a tween/timeline to have it dump any recorded starting values and re-record them the next time a render occurs. Is that what you're looking for? 

[schonert 0 Likes (Newbie)]

Hey Guys - Thanks for your response!

@Podrigo clearing the timeline before setting the values seems like the best option here.  Although if the timeline is cleared halfway the to() method will recalculate the from position which will result in the reverse() method not behaving as intended. This was also my first attempt

@GreenSock The invalidate() seems to reset the to() from properties aswell - so unless fromTo() is used, this will not work.

I'm a bit surprised that greensock choses not to execute a function if passed as property value. Afraid that developers will pass functions that will slow down the run time?

[Rodrigo 3,490 Likes (Superhero)]

@Podrigo clearing the timeline before setting the values seems like the best option here.  Although if the timeline is cleared halfway the to() method will recalculate the from position which will result in the reverse() method not behaving as intended. This was also my first attempt

 

Yep I forgot an important information, in this cases the best approach is use fromTo() instances, like that you're forcing the starting values. Otherwise you'll have to record the current progress, pause the instance at zero seconds, clear it, populate it again and finally set it's progress to the recorded value. That could create an undesirable rendering flash.

 

I'm a bit surprised that greensock choses not to execute a function if passed as property value. Afraid that developers will pass functions that will slow down the run time?

 

Actually, as I said in my first respond, this is by design and one of the many reasons GSAP is so fast, otherwise you'll force constant read/write and updates in order to allow those changes and the performance cost could be very high.