Invalidate Only 1 Tween on a Timeline

[m4g1c14n]

What I wish to achieve is fairly simple, I wish to assign a backgroundColor to a dynamic variable that I need to change on the fly, I understand that we need to use a function based tween to achieve the desired result.

 

On this example, I have a restart button that will change the color :

1. IF I dont call the tl.invalidate , the X will not be randomized and the backgroundColor will not be changed to "From Green" ( instead of the original "From Red" ), all other animation is perfect ( The circle will render from Red to Black, and then The circle will render from Black to Blue , and then the button will be revealed )
2. IF I call the tl.invalidate, the X will be randomized, the backgroundColor will be changed to "From Green", but all other information do not remember their initial value ( The circle will animate from Green to blue instead of Black,  the button will already be visibled )

 

By invalidating the timeline, I can see that the timeline do not remember the initial value at all

 

What can I do, I just need to assign a property to dynamic variable and randomized the random value again

 

See the Pen QWjOYbV?editors=1011 by m4g1c14n (@m4g1c14n) on CodePen.

[m4g1c14n]

I think I managed to find a way to doing this, by using separate timeline

See the Pen bNbrBdK?editors=1011 by m4g1c14n (@m4g1c14n) on CodePen.

 

Is there any other more elegant way of doing this?

[Rodrigo]

Hi,

 

This would be my approach:

See the Pen KwPvygd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!