Jump to content


SplitText doesn't work properly on inner items

Recommended Posts

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

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

From the docs: 


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

  • Like 1
Link to comment
Share on other sites

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



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:



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!


  • Like 1
Link to comment
Share on other sites

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

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.