SplitText

[Baris Dogan]

Hey Folks,
Hope you're all doing well and had a great Easter weekend!
 

I'm reaching out because I need a bit of help with SplitText.js.
I’ve created animations for some HTML5 banners, but the media agency reported that there’s an issue with how the text is being split.

I’ve attached a screenshot they sent—please take a look. It seems like there’s a problem with the text splitting on their end.

What’s odd is that everything works perfectly fine on my side. I’ve tested it on multiple devices (mobile, PC, Mac) and browsers (Chrome, Edge, Safari, Firefox), and haven’t encountered any issues.

Here’s a CodePen link below.

See the Pen NPPRxdo by barisDogan (@barisDogan) on CodePen.

I’d really appreciate it if you could take a look and let me know how I might be able to fix or troubleshoot this.

Thanks a lot in advance!
Baris

See the Pen qEBGgJz by barisDogan (@barisDogan) on CodePen.

Edited April 22, 2025 by Baris Dogan
I used GSAP Template

[GreenSock]

Sorry to hear about the trouble, @Baris Dogan. It's pretty much impossible for us to troubleshoot by only looking at a screenshot - we need to see the underlying DOM elements and what's going on there. It could also be related to some kind of CSS issue. Did you make sure you wait until the fonts finish loading before splitting? Like document.fonts.ready(() => {...});

 

If you'd like more help, please make sure you provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. 

 

Thanks for being a Club GSAP member! 💚

[Baris Dogan]

18 minutes ago, GreenSock said:

Sorry to hear about the trouble, @Baris Dogan. It's pretty much impossible for us to troubleshoot by only looking at a screenshot - we need to see the underlying DOM elements and what's going on there. It could also be related to some kind of CSS issue. Did you make sure you wait until the fonts finish loading before splitting? Like document.fonts.ready(() => {...});

 

If you'd like more help, please make sure you provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. 

 

Thanks for being a Club GSAP member! 💚

Thank you so much for the quick reply.
I totally agree with that; we need to see the underlying DOM elements and what's going on there.
Yes, I have tried, but there was still the same problem; at least they reported it like that.  (here the that version)

See the Pen NPPRxdo by barisDogan (@barisDogan) on CodePen.

 

Edited April 22, 2025 by Baris Dogan

[GreenSock]

In your CodePen, you are NOT waiting for the fonts to load before splitting. You're calling init() immediately, and that's where you're doing the split. 

 

It's best to wait to call "new SplitText()" on anything until the fonts finish loading. It's not just about waiting to animate them - it's the splitting that's the key. 

[Baris Dogan]

24 minutes ago, GreenSock said:

In your CodePen, you are NOT waiting for the fonts to load before splitting. You're calling init() immediately, and that's where you're doing the split. 

 

It's best to wait to call "new SplitText()" on anything until the fonts finish loading. It's not just about waiting to animate them - it's the splitting that's the key. 

is it much better?

See the Pen NPPRxdo?editors=1010 by barisDogan (@barisDogan) on CodePen.

 

[Rodrigo]

Hi,

 

I tested your demo in different devices (Ubuntu 22, MacOS, Android and iOS) without being able to replicate the issue 🤷‍♂️ Maybe something else in the setup is causing this, but definitely is not related to GSAP and/or SplitText.

 

Also is worth noticing that the entries() method returns an iterator object and I'm not sure if each element in the iterator is actually a promise, so this might not work as you expect:

Promise.all([document.fonts.ready, ...document.fonts.entries()]).then(
  // ...
)

You might want to check what the iterator object has and if it can be spread into an array as well.

 

Sorry I can't be of more assistance 😞