Share Posted June 28, 2022 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? Link to comment Share on other sites More sharing options...
Share Posted June 28, 2022 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 More sharing options...
Author Share Posted June 28, 2022 I preloaded the font, so it should load before SplitText. Link to comment Share on other sites More sharing options...
Share Posted June 28, 2022 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 More sharing options...
Author Share Posted June 28, 2022 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 More sharing options...
Share Posted June 29, 2022 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 More sharing options...
Author Share Posted July 3, 2022 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 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 4, 2022 Here are some of the problems I noticed in your code: 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. 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 } }); You forgot to pass an empty dependency Array to the useEffect()/useLayoutEffect() method, so it'll get called every time it renders You didn't do anything in your cleanup function except call ScrollTrigger.refresh() which is rather pointless. You defined a linesClass on a SplitText that only split by "words" (pointless) 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 More sharing options...
Author Share Posted July 4, 2022 Thanks a lot Jack! It works perfectly! Link to comment Share on other sites More sharing options...
Author Share Posted July 12, 2022 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 Link to comment Share on other sites More sharing options...
Share Posted July 13, 2022 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 More sharing options...
Author Share Posted July 13, 2022 Thanks Jack! I took a look at the codesandbox link, but its rendering an error. Link to comment Share on other sites More sharing options...
Share Posted July 13, 2022 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 More sharing options...
Author Share Posted July 13, 2022 This is what I got when clicking into the sandbox link Link to comment Share on other sites More sharing options...
Share Posted July 13, 2022 Oh, were you on a small screen? Please try again. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now