Jump to content
Search Community

SplitText by lines and wrapping

acg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

We currently use SplitText by lines to animate a sentence.


One of the words is "bold", so we wrap it in a <span> tag and everything works fine.


If there are no spaces following the "</span>" end tag and the line needs to wrap, it splits at the span tag.


We are trying to translate a project to Japanese which doesn't really use "space" characters. Because of the lack of "spaces", all Japanese characters "wrap" after the "</span>". And if you "revert" back to original HTML, the wrapping is different than the "animated" lines. In other words, the "revert" causes the text to shift dramatically.


I saw there is a "wordDelimiter" option, but that doesn't seem to apply when breaking by "lines".


Does anyone have any suggestions that might help this situation?


We can always choose not to do the SplitText animation for Japanese, but that obviously would be a last resort.


Thanks for your advice.


Link to comment
Share on other sites

Hello acg and welcome to the GreenSock forum!


Sorry your having an issue!


Do you have an example of this so we can see exactly what the behavior looks like in action. If you could please create a limited codepen example showing this it will help us in helping you.



Thank You! :)

  • Like 1
Link to comment
Share on other sites

Thanks for the demo. 

SplitText wasn't really designed for other languages and I'm struggling to find a solution that would work well for you with what's currently available in the API. 

We will think it over and if something comes to mind we will let you know.

Link to comment
Share on other sites

Thanks, Carl.


I figured as much, but I thought I'd check with the experts before moving on to an alternative.


If nothing else, it is something to add to your long-term issue tracking. Perhaps the GSAP team is at least aware of the challenges of languages similar to Japanese.


This will also help others be aware of the issue.

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.
  • Create New...