Split text confused

[anotheruser 10 Likes (Newbie)]

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

[Jonathan 5,389 Likes (Superhero)]

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

[anotheruser 10 Likes (Newbie)]

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>

[Jonathan 5,389 Likes (Superhero)]

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

 

Resources:

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

 

 

[anotheruser 10 Likes (Newbie)]

Hi, 

 

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

 

[GreenSock 18,237 Likes (Superhero)]

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,
                j;
            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[i].parentNode.removeChild(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

 

[anotheruser 10 Likes (Newbie)]

Woah , Thats works wonderful , Thanks a lot

[mattiasdominguez 1 Likes (Newbie)]

Hi!

 

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

[GreenSock 18,237 Likes (Superhero)]

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.

[mattiasdominguez 1 Likes (Newbie)]

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

 

[oligsap 10 Likes (Newbie)]

Hi Jack @GreenSock,

 

Did a codepen to illustrate the fact that the snippet above doesn't work with strong tags :

 

See the Pen yLKGjym by olig (@olig) on CodePen

[Cassie 5,088 Likes (Superhero)]

This was the solution from the linked thread

[oligsap 10 Likes (Newbie)]

I'm sorry Cassie what codepen exactly is the solution ?

[Cassie 5,088 Likes (Superhero)]

It wasn't a codepen. It was just some written advice to put each word in a strong tag.

I tried to show you but I feel like I'm going absolutely mad because this text element has a display:none on it and I have no idea how that's happening.

See the Pen BarvbNW by GreenSock (@GreenSock) on CodePen

[Cassie 5,088 Likes (Superhero)]

Wild. Now there's disappearing lines.

Something deeply whacky is going on with this helper function. We'll look into it!

See the Pen fa243b36f57652c2eeaaff389f515a2e?editors=1010 by GreenSock (@GreenSock) on CodePen

[Cassie 5,088 Likes (Superhero)]

paging @GreenSock for when you're back in on monday