Using invalidate() to have timeline re-read javascript variable - doesn't work

[Trynix]

Hi everyone!!

In the attached codepen, I declare a variable before timeline animation (which starts paused anyway), and then I update the value of the variable and call the timeline with .invalidate().restart()  (which in the actual implementation will trigger via a button click) hoping that the animation will run with the new value in mind, but it doesn't.

Am I misunderstanding the purpose of invalidate()? How do I get the timeline to read the updated value?

See the Pen KKyqbWN by mazayadigital (@mazayadigital) on CodePen

[akapowl]

Hello @Trynix

 

Try using a function-based value for the innerText

 

// try this
innerText: () => toVal

// instead of this
innerText: toVal

 

See the Pen ExbXGJO by akapowl (@akapowl) on CodePen

[Trynix]

1 minute ago, akapowl said:

Hello @Trynix

 

Try using a functional value for the innerText

 

// try this
innerText: () => toVal

// instead of this
innerText: toVal

 

 

 

Thank you!! I'll definitely do that for now. But just to ensure my understanding and concepts are accurate, isn't invalidate() supposed to wipe all variables the timeline has read clean, so that it reads them again?

[akapowl]

I think it flushes recorded start and end values, but to make sure it reads new values to work with, you would have to do so by using function-based values.

 

See the Pen dyZRaoy by akapowl (@akapowl) on CodePen

[mikel]

 

Just an alternative ...

 

See the Pen ExbXrWz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel