Can't seem to be able to invalidate a timelines initialisation values

[Power Digital]

Hi I am working on creating a few marquee like text loops using the horizontalLoop() helper function that I found here on the site, but I am running into an issue on first load. When the font loads on the live site the spacing of elements changes and the loop animation overlaps itself.  I tried implementing the method I found here https://greensock.com/forums/topic/10228-refresh-timeline-without-hitting-browser-refresh-button/ in order to refresh the values after the spacing changes but it doesn't seem to work.

On the live site the issue is caused by the font loading a second later, I was not able to reproduce this issue on codepen so instead I changed the font with javascript after I initialize the loop to cause the same type of issue. Line:179

After changing the font I tried to invalidate the values like on the example I linked but it doesn't seem to be working.

The purpose of line 179 is just to break it on purpose, if you remove that you can see that the loop works flawlessly.

Thanks in advance!

 

See the Pen LYQMMqN by akalex-x (@akalex-x) on CodePen

[GreenSock]

Why not just run your code after the font loads? 

https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded

 

Otherwise, you need to reset everything back to its original state (including all inline styles, etc.) and then re-create your horizontalLoop() so that it has all the correct sizing baked-in at that point. And don't forget to kill() your old one so it's not fighting with the new one. But again, it sure seems much simpler to just wait for your fonts to load before you execute the JS code that's creating the loop to begin with. 

[Power Digital]

I did not know there was a way to check for this, it seems to be working fine. Thanks!