Jump to content


Split text confused

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

Hi , You can see in the codepen that i am trying to animate each LINE to move from right to the current point , you can see that "HI", "welcome" "home" and "friend" should be each line , but what i am getting is "Home friend" as a same line , am i doing something wrong?

See the Pen ELyoRR?editors=1010 by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

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



Thanks for that , but any luck on this?


HI welcome <div>home friend</div>


because your code doesnt work for this :(


See the Pen bMwLgg by jeffin417 (@jeffin417) on CodePen


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) {
    var split = new SplitText(target, vars),
        words = (vars.type.indexOf("words") !== -1),
        chars = (vars.type.indexOf("chars") !== -1),
        insertAt = function(a, b, i) { //insert the elements of array "b" into array "a" at index "i"
            var l = b.length,
            for (j = 0; j < l; j++) {
                a.splice(i++, 0, b[j]);
            return l;
        children, child, i;

    if (typeof(target) === "string") {
        target = document.querySelectorAll(target);
    if (target.length > 1) {
        for (i = 0; i < target.length; i++) {
            split.lines = split.lines.concat(nestedLinesSplit(target[i], vars).lines);
        return split;

    //mark all the words and character <div> elements as _protected so that we can identify the non-split stuff.
    children = (words ? split.words : []).concat(chars ? split.chars : []);
    for (i = 0; i < children.length; i++) {
        children[i]._protect = true;

    children = split.lines;
    for (i = 0; i < children.length; i++) {
        child = children[i].firstChild;
        //if the first child isn't protected and it's not a text node, we found a nested element that we must bust up into lines.
        if (!child._protect && child.nodeType !== 3) {
            children[i].parentNode.insertBefore(child, children[i]);
            children.splice(i, 1);
            i += insertAt(children, nestedLinesSplit(child, vars).lines, i) - 1;
    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 7
  • Thanks 1
Link to comment
Share on other sites

  • 2 years later...



Could it be that this workaround doesn't work with <strong> tags?

Link to comment
Share on other sites

18 minutes ago, mdo said:

Could it be that this workaround doesn't work with <strong> tags?

Got a demo? That'll definitely help us help you.

Link to comment
Share on other sites

  • 1 year later...
On 5/14/2020 at 5:20 PM, GreenSock said:

Got a demo? That'll definitely help us help you.

Woops... Didn't see this and experiencing the same problem 1,5 years later 😅

Codepen => 

See the Pen RwLORvB by mdominguez (@mdominguez) on CodePen

Other topic that I've just created today => 


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.