wpsoul Posted October 13, 2022 Share Posted October 13, 2022 Here you can see that first block of text are wrapped by additional container. Second block doesn't have this and it's working properly. In previous versions, both blocks worked properly See the Pen MWGjMZe by igor-sunz (@igor-sunz) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 14, 2022 Share Posted October 14, 2022 Hi @wpsoul, I went back until version 3.2 and I can't find the setup you have is not working as you expect in any of them. Can you share some specifics about which version this was working with and the real HTML and CSS that this was working on? Also just in case I'll ping @GreenSock so He can take a look at it and most likely He'll tell us what is going on. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted October 14, 2022 Share Posted October 14, 2022 From the docs: Quote Splitting nested elements by "lines" is not supported (here is a workaround) I'm not sure what version you think worked previously, but perhaps it was a REALLY old version that didn't have the ability to handle nested elements for chars/words. I'd be curious to see a demo with an old version working. Anyway, here's a fork with that helper function: See the Pen QWrYYxr?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
wpsoul Posted October 14, 2022 Author Share Posted October 14, 2022 Maybe, I am wrong because I used "words" type before. I checked now and such problem is only when dividing by lines. Unfortunately, your solution doesn't work for me in React, it's breaking whole text and merging it, words and chars type totally destroyed . So, I will keep as is. Link to comment Share on other sites More sharing options...
Rodrigo Posted October 14, 2022 Share Posted October 14, 2022 Hi, The word breaking around here always gets us curious : You mention React, what version? 18? If so you might have to cleanup your SplitText (use the revert method) in the return function of your useEffect or useLayoutEffect (we prefer layout effect to avoid FOUC (https://greensock.com/react#fouc). There are reported issues from Strict Mode in React: Also since version 3.11 GSAP has context which is super helpful for React projects: https://greensock.com/docs/v3/GSAP/gsap.context() Please let us know if using context and cleanup and if you keep having issues we'd love to se some minimal example in React in order to see what could be the problem. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
wpsoul Posted October 14, 2022 Author Share Posted October 14, 2022 App is fine, all other gsap animations are working. And I use context cleaning already. This app is for WordPress which has additional react functionality, I guess that problem is because text is inside Richtext editor, which also manipulates text. Unfortunately, I can't make any kind of demo so I can't see how you can help. It's not very critical in current point. I fount temporal fix. Instead of dealing with text, I just check if block has inner div and simply change textobject for something like textobj.querySelector('div') This works, but unfortunately, GSAP makes more lines. When I have 2 lines of text, it's making 4 lines and here I gave up. Better to keep previous logic when whole block is line, it's not so critical like wrong line break 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