Problem with Custom js Text Animation Rendering

I have this problem when using a custom text animation from GreenSock (SplitText) in Hero that when I first open the page, first the font is displayed in black, the two words appear next to each other and a second later the animation starts.

I think this looks pretty bad… However, I have found that once the page has been opened during a browser session, the animation plays correctly.

Is there any way, or addition to the code, that the animation will not play until it is fully loaded? Without seeing the text formatted differently beforehand.

Here is my site Read-Only: