GSAP SplitText Line Breaks

[Deallie_Digital 0 Likes (Newbie)]

https://codesandbox.io/s/black-paper-t0e7j6?file=/src/App.js

 

Hello All

 

Is there any reason why the Splittext Line breaks like this in smaller screens?

[GreenSock 17,913 Likes (Superhero)]

Did you make sure your font was fully loaded and applied to the page BEFORE you ran SplitText? If not, then SplitText split things based on how things were rendered at that time, and then maybe a little bit later your font loaded and caused things to reflow in an odd way. Always make sure things are fully loaded and rendered properly BEFORE you split the text.

[Deallie_Digital 0 Likes (Newbie)]

I preloaded the font, so it should load before SplitText. 

[GreenSock 17,913 Likes (Superhero)]

Are you saying that if you simply load the page on a mobile device WITHOUT splitting, the line breaks are fine, but if you load it on a mobile device and split (no resizing), it doesn't look right? 

 

Did you read all the suggestions/caveats in the docs? For example: 

Quote

Some browsers (like Safari) apply custom kerning by default between letters, so when characters are split apart and put into their own divs, the spacing is slightly different. A bug has been filed with the Safari team (it’s a browser issue, not SplitText) but you can typically eliminate the differences by setting these CSS properties:

font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);

 

[Deallie_Digital 0 Likes (Newbie)]

The text loads fine and SplitText works on the all screens, but when I change the screen size, after the initial render the lines begin to break. This is in Chrome. The only time it works is in Display: 'Inline-Block", but that creates another issue with the SplitText Divs messing up the layout of the Container.

[GreenSock 17,913 Likes (Superhero)]

Oh, right, that is to be expected. That's just how browsers work. If you break the text apart into lines which entails wrapping them each in a <div>, those will remain distinct of course. 

 

You could add a "resize" event listener on the window and .revert() the SplitText instance(s) and then split them again at the new size if you'd like. 

[Deallie_Digital 0 Likes (Newbie)]

I added the revert instance at complete, but I'm still having issues with the Line Breaks. I've seen countless SplitText code on codepen and Code Sand Box and tutorials, but I don't see any examples in which revert was required. Is this a React 18 issue? 

 

https://codesandbox.io/s/relaxed-flower-fvkynk?file=/src/App.js

[GreenSock 17,913 Likes (Superhero)]

Here are some of the problems I noticed in your code:

1. You are using a Flexbox container that alters the width of the split text when they're split by lines. It's a CSS/layout issue (it's how Flexbox works). In other words, if you just leave all the text loose, the browser sees it as one long chunk and then determines the width of that container inside the Flexbox accordingly, but when you split the lines into their own <div> elements, the browser totally changes the calculation for the width of the containing element because you didn't set any width on those children of the Flexbox container. You'll need to fix that CSS issue, like by setting width: 20% on the ImageContainer, and width: 80% on the ContentWrap for example. 
2. You were putting an onComplete on the ScrollTrigger instance itself. There is no such thing. I think you meant to put it on the timeline, like: 

   gsap.timeine({
     onComplete() {
       // do stuff
     }
   });

    

3. You forgot to pass an empty dependency Array to the useEffect()/useLayoutEffect() method, so it'll get called every time it renders
4. You didn't do anything in your cleanup function except call ScrollTrigger.refresh() which is rather pointless.
5. You defined a linesClass on a SplitText that only split by "words" (pointless)
6. Your useEffect() is getting called TWICE on startup. That's probably the new annoying React 18 behavior. So you're splitting the text twice, creating multiple animations and ScrollTriggers (because, again, you didn't clean things up in the function you returned in the useEffect()). 

Perhaps this is closer to what you wanted:

https://codesandbox.io/s/eager-brook-un3lc4?file=/src/App.js

[Deallie_Digital 0 Likes (Newbie)]

Thanks a lot Jack! It works perfectly!

[Deallie_Digital 0 Likes (Newbie)]

Sorry to bug you guys, but adding Scrolltrigger matchmedia is now causing the text to disappear. I saves the styles and set invalidateonRefresh to true, but I'm still getting the errors

 

https://codesandbox.io/s/splittext-example-06zh2v?file=/src/styles.css

[GreenSock 17,913 Likes (Superhero)]

That's because React is firing your useEffect() twice and you didn't do proper cleanup. So basically it's trying to split the text twice, and you've got duplicate animations/ScrollTriggers/SplitTexts created. 

 

I think you were looking for something like this: 

https://codesandbox.io/s/splittext-example-forked-6rmbqs?file=/src/Animation.jsx

 

It's all React-related complexities. Annoying, I know. 

 

Oh, and you had an error where you capitalized the "S" in scrollTrigger on your timeline. There was a warning in the console. 

[Deallie_Digital 0 Likes (Newbie)]

Thanks Jack! I took a look at the codesandbox link, but its rendering an error.

[GreenSock 17,913 Likes (Superhero)]

6 minutes ago, Deallie_Digital said:

I took a look at the codesandbox link, but its rendering an error.

What do you mean? I just looked again and it seems to be rendering fine. What am I missing? 

 

There were warnings in the console because your code was referencing various elements that don't exist. 

[Deallie_Digital 0 Likes (Newbie)]

This is what I got when clicking into the sandbox link

[GreenSock 17,913 Likes (Superhero)]

Oh, were you on a small screen? Please try again.