Jump to content
Search Community

Dynamicly updating timeline properties

schonert 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

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@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.

  • 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...