jchensor Posted January 15, 2021 Share Posted January 15, 2021 Hello! I've recently started to use SplitText and it's very cool. However, I'm finding some odd behavior in it, and I'm wondering if I could get some help. In the attached file, if you unzip it and just load "topics.html", you'll notice that at one part, "weprocess" shows up on the screen. In the "topics.js" file found in the "js" folder, the text I have written has a "<br>" tag in between the two words. So SplitText isn't processing it normally as I have seen in all the sample Codepens. And I haven't been able to reproduce it properly in the Codepens either. Not only that, but if you uncomment the single line in the "revert" function where I call "mySplitText.revert()", the <br> is read properly after revert takes effect. (Note: I'm using Chrome to view the html file currently on a Windows X machine.) Also, the way I have the text set up is in a very defined space. But when the text gets too long to fit in there, SplitText starts to do some crazy things to the format display. All you need to do to see this is, in the "topics.js" file, comment out the first "var topicDetail" line and uncomment out the second one right under it and refresh "topics.html" in the browser. When the line is particularly long, the format gets completely dismantled. I'm not sure what it is that I'm doing that makes it all behave incorrectly. But any help would be appreciated! Thanks! Edited to add: It *probably* has to do with the fact that I am setting the html text and re-pulling it via the js file. While this seems redundant, for the purposes of what I'm trying to accomplish, this is a necessary step so I can't avoid doing this. - James Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2021 Share Posted January 15, 2021 Hey James. Please do not share unrestricted Club GreenSock plugins with people. I went ahead and deleted your ZIP file because you did that. That's part of the reason why we ask that people create minimal demos using CodePen - because the Club GreenSock plugins that are available on CodePen are the restricted versions so that people can't get the Club GreenSock plugins for their projects for free I understand that you didn't mean to and no harm done - just letting you know for the future. I created a CodePen version of your demo: See the Pen QWKzNby by GreenSock (@GreenSock) on CodePen We'll look into the issue now 2 Link to comment Share on other sites More sharing options...
jchensor Posted January 15, 2021 Author Share Posted January 15, 2021 Holy crap I didn’t even THINK of that. I’m so so so so sorry!! That’s totally my bad! O_o Thousand apologies from my end! - James Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2021 Share Posted January 15, 2021 This issue is because of your flex display. If you remove the <br> (which SplitText has to do) then the flex forces things on the same line. Removing the flex display fixes the issue: See the Pen JjRwEGQ?editors=0100 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
jchensor Posted January 17, 2021 Author Share Posted January 17, 2021 Ah, yes, I see. Okay. Removing the flex does fix the <br> tag problem. The reason for using the "flex" option was to make sure the text was always centered vertically regardless of how many lines the text is, because for my purposes I don't actually ever know how many lines that display is gonna be. Using the "flex" option was the only solution I had found that worked for me so that the text will always be vertically centered dynamically with one line, two lines, three lines, etc. Removing it makes it so that text is always at the top of the graphic in the original zip file (or the top of the css bounding box width and height). Obviously, centering the text vertically isn't your problem, though. LOL! I'll have to see if I can an alternate solution that supports both. But at least I know why this is happening with the Greensock portion! Thank you very much! - James Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 17, 2021 Solution Share Posted January 17, 2021 12 minutes ago, jchensor said: I'll have to see if I can an alternate solution that supports both. But at least I know why this is happening with the Greensock portion! Maybe you could wrap it in a container <div>, so you split stuff inside that but the wrapper (outside that container) is flex. Or you could use techniques listed at https://css-tricks.com/centering-css-complete-guide/ Happy tweening! 2 Link to comment Share on other sites More sharing options...
jchensor Posted January 17, 2021 Author Share Posted January 17, 2021 6 minutes ago, GreenSock said: Maybe you could wrap it in a container <div>, so you split stuff inside that but the wrapper (outside that container) is flex. You, sir, are my hero. Totally worked. Created a flex container and kept it separate from the text, and now I get the line breaks AND the self-vertical-centering. Thank you so much! 1 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