Jump to content
GreenSock

Deallie_Digital

GSAP SplitText Line Breaks

Go to solution Solved by GreenSock,

Recommended Posts

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.

Link to comment
Share on other sites

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

Screen Shot 2022-06-28 at 2.25.45 PM.png

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

Thanks a lot Jack! It works perfectly!

Link to comment
Share on other sites

  • 2 weeks later...

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

This is what I got when clicking into the sandbox link

Screen Shot 2022-07-13 at 8.31.53 AM.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×