How to dynamically assign the value of x?

[bs.choi]

hi.

First of all, I'm not good at English, so I'm using a translator. please understand.

 

I made a marquee using gsap tween.

 

The function works without any problems.
However, when a certain button is pressed, there is an event that the marquee text is changed.

 

Here's the problem.
As the text is changed, there is a difference from the x value set when tween is rendered.

 

In my opinion, as the text changed, the width also changed, but it seemed to be a problem because the variable 'distance' was not reassigned after calculation with the changed value.

 

I used MutationObserver to reassign the value of the variable set to the x value when the text changes, but it doesn't work properly.

 

I've searched several forums and documentation, but haven't been able to find the answer I'm looking for.

What did I do wrong?

 

 

current code :

https://jsfiddle.net/3bap6dcw/2/

 

In the above example, even if the marquee text is changed by pressing the 'short' and 'long' buttons, the value of the distance variable assigned to x is reassigned and I want it to proceed like the first time.

 

What should I do?
Please help me!

Thank you.

[OSUblake]

9 minutes ago, bs.choi said:

What did I do wrong?

 

That's not how JavaScript works. You can't just update a variable and expect an object to that you assigned that value to also update. 

 

If you need to update a value, the 2 most common ways are either recreating the animation from scratch or use function based values kind of like here.

 

See the Pen NWwdLXY by GreenSock (@GreenSock) on CodePen