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". 

[Rossmiester]

I know this has been a year since the question has been asked but I am having the same issue once splitText puts each character in a div. I know @Cassie you say it is usually due to custom fonts being loaded after splitText has run but I don't believe that to be the case for me. 

 

Question - couldn't I test this theory by commenting out the custom font I have on the splitText element? If it doesn't work on the system fonts than I can rule out the issue being the custom font?

 

I also tried using text-wrap: no-wrap, white-space: no-wrap, box-sizing, and the revert() function. Nothing seems to work. Do we know of another solution? I am wondering how others are getting around this using splitText when the container resizes. 

 

Thank you!!

[Cassie]

Quote

Question - couldn't I test this theory by commenting out the custom font I have on the splitText element? If it doesn't work on the system fonts than I can rule out the issue being the custom font?

Yep, that's a good way to test. Can you possibly make us a minimal demo showing the issue too?

[Rodrigo]

Hi,

 

Have you tried the document.fonts API?

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts#doing_operation_after_fonts_are_loaded

 

Happy Tweening!

[Rossmiester]

@Cassie Screen captured my issue for you to see.. thanks!

[Rossmiester]

@Rodrigo I have not tried that... this code here?  What goes into the fontFace array? Is it a path to my custom fonts files? Comma separated for multiple fonts?

Thank you!

[Rodrigo]

That's just in case you need to access the font faces loaded. In the case of getting weird behaviours when using SplitText with custom fonts, is basically a way to know that the fonts have been loaded and applied in the DOM before creating the SplitText instances, nothing more. Most of the time you just need something like this:

document.fonts.ready.then(() => {
  // Create your SplitText and GSAP related instances here
});

Based on the video you supply you might want to revert your SplitText instances and create them again on the resize event. Maybe debounce the resize handler for better performance.

 

Hopefully this helps.

Happy Tweening!

[Rossmiester]

Hi @Rodrigo I added that code around my splitText and GSAP instances and nothing happens. I already have the following code wrapped around all my GSAP code: 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function (event) {

  console.log("DOM loaded");

  //wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function (e) {

 

[Cassie]

Sounds like it's time to put together a minimal demo for us!

[Cassie]

It's likely just one CSS property or something causing this issue, it's really so much easier for us to help if we can see how your HTML, CSS and JSS are set up.