SplitText doesn't work properly on inner items

[wpsoul]

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

[Rodrigo]

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!

[GreenSock]

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

[wpsoul]

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.

[Rodrigo]

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!

 

[wpsoul]

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