Jump to content
Search Community

Split text confused

anotheruser 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

This is happening because you have an extra <div> tag inside your .text-container <div> tag. Otherwise you would have to target the child <div> tag in your .text-container element.


<!-- i removed the style atribute so you can see the html markup in this code block -->

<!-- you have this with nested child wrapped around 'home-friend' text -->
<div>HI welcome <div>home friend</div></div>

<!-- should be this so you have all text without that extra div tag -->
<div>HI welcome home friend</div>


Just remove that extra <div> tag and SplitText will split the way you want.


See the Pen WJGEbV by jonathan (@jonathan) on CodePen


Happy Tweening! :0

  • Like 2
Link to comment
Share on other sites

Hi , Thanks for the reply ,I know there is extra div tag ,Unfortunately it is used to separate the break line in my case , I just wanna know is there anything possible along the same scenario I have?  


for example scenarios like the following might happen too and I need the following to be each line , Possible?


<div>HI welcome</div><div>home friend</div></div>

Link to comment
Share on other sites

Hi again @anotheruser and welcome to the GreenSock Forum!


If you want to keep your existing HTML markup, you would have to also target that .text-container child <div> tag as well.


Meaning another instance of splitText OR just use the SplitText target parameter to tell GSAP the CSS selector to use for targeting your .text-container children. Allow GSAP to target the elements with a CSS selector and don't use getElementsByClassName().


var mySplitText = new SplitText(".text-container > div", { type: "lines" }),
    splitTextTimeline = new TimelineLite();

splitTextTimeline.staggerFrom(mySplitText.lines, 1, { x: 800 }, 2);


With a CSS selector like .text-container > div


See the Pen PeGEOv by jonathan (@jonathan) on CodePen


Happy Tweening :)



SplitText Docs: https://greensock.com/docs/Utilities/SplitText



  • Like 3
Link to comment
Share on other sites

Sorry, but SplitText doesn't currently support "lines" on nested elements. However, I whipped together a utility function that should give you what you need: 

function nestedLinesSplit(target, vars) {
  target = gsap.utils.toArray(target);
  if (target.length > 1) {
    let splits = target.map(t => nestedLinesSplit(t, vars)),
        result = splits[0],
        resultRevert = result.revert;
    result.lines = splits.reduce((acc, cur) => acc.concat(cur.lines), []);
    result.revert = () => splits.forEach(s => s === result ? resultRevert() : s.revert());
    return result;
  target = target[0];
  let contents = target.innerHTML;
  gsap.utils.toArray(target.children).forEach(child => {
    let split = new SplitText(child, {type: "lines"});
    split.lines.forEach(line => {
      let clone = child.cloneNode(false);
      clone.innerHTML = line.innerHTML;
      target.insertBefore(clone, child);
  let split = new SplitText(target, vars),
      originalRevert = split.revert;
  split.revert = () => { 
    target.innerHTML = contents; 
  return split;


Then, all you've gotta do is use that function in place of "new SplitText()", like:


var mySplitText = nestedLinesSplit(assetTexts, {type:"lines"});


Does that help? 


Here's a fork: 

See the Pen 3b5fb36c6db487a232405cf135e0b3c6 by GreenSock (@GreenSock) on CodePen


  • Like 8
  • Thanks 2
Link to comment
Share on other sites

  • 2 years later...
  • 1 year later...
  • 6 months later...
  • 10 months later...

Hey, friends!


Has there been any movement on this one? I've been running into some issues with the helper function as well (albeit perhaps not the same issues as this thread) and would love to know if a reliable solution has been found!

It seems as if strong tags, em tags, and a tags all force strange breaks, even if they're not close to the end of the line.

Link to comment
Share on other sites

  • 1 month later...

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...