Update destination value of Tween after creation

[mrchrstmnn]

Hi, this is probably very easy, but I couldn't find anything on it:

 

I have a tween for the height value of an element. The target height does change though now and then. So before restarting the tween i would have to update the height property of the Tween.

How do I do that?

[ZachSaucier]

Hey mrchrstmnn and welcome to the GreenSock forums!

 

Tweens and timelines are set at the moment of creation. So changing their value mid animation isn't possible.

 

With that being said, you could use GSAP's modifiers to change the value that GSAP is passing into it. It passes in the value that it's about to set and then you can manipulate it and return a value that you want to use instead. Or you could kill the tween and create a new one as needed.

 

But based on your description, you don't need to do any of that. You can simply create a new tween going to the height that you need at the moment where you need it. You could even animate to a height of auto!

 

Here's a basic idea. Without seeing your exact setup it's hard to help more tangibly:

See the Pen yLyZqqo?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yeah, I'd probably do what @ZachSaucier suggested but one other option is to use a function-based value and then invalidate() your tween to force it to re-get the value(s) again on the next render. 

 

11 minutes ago, ZachSaucier said:

Tweens and timelines are set at the moment of creation. So changing their value mid animation isn't possible.

Just to clarify, the start/end values of tweens are typically locked in when the tween renders for the first time (not immediately upon creation, otherwise tweens with delays or ones in sequences might end up recording starting values that should be affected by the other animations before it). 

 

When you invalidate() a tween, you basically tell it "clear out all your starting/ending values and re-record them the next time you render". Thus, if you have a function-based value, it'll call that function again on the next render and use that as the value. 

[mrchrstmnn]

Wow, thanks, that was quick and very well explained!

If just killing and recreating the Tween is not a bad practice it is indeed the simplest solution for my case.
I do like the possibility of having a function based value. Sounds like an elegant solution for another problem.

Thank you for having me here in the forum!

[GreenSock]

2 minutes ago, mrchrstmnn said:

If just killing and recreating the Tween is not a bad practice it is indeed the simplest solution for my case.

Yeah, totally. It's not a bad practice at all. We do it all the time. GSAP is highly optimized for speed, so you should be fine unless you're spewing out thousands of tweens on every tick or something

 

2 minutes ago, mrchrstmnn said:

Thank you for having me here in the forum!

Absolutely! We love helping people around here. It's one of the things that really sets GSAP apart - the friendly and helpful community.

 

Happy tweening!