GSAP SplitText - break issue

[pixelarchitect]

I am using ScrollTrigger and SplitText to animate lines of text when they enter the viewport, this works great but in some cases (mobile most often) the line breaks are weird. I can imagine this happens when you drag the window yourself smaller because the breaks are already added but this also (sometimes) happens when you load the website without dragging the window smaller or bigger.

I also added a screenshot as an example of what happens, does somebody know what happens or know a solution?

See the Pen poQoooV by pixelarchitect (@pixelarchitect) on CodePen

[Cassie]

Hey! This is usually due to custom fonts loading in after splittext has run.

https://stackoverflow.com/questions/6677181/how-to-know-when-font-face-has-been-applied

 

You can listen to see if it's loaded and then do the splitting - you'll need the readyState to be "complete".