Split text confused

[anotheruser]

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]

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]

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]

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]

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]

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);
    });
    target.removeChild(child);
  });
  let split = new SplitText(target, vars),
      originalRevert = split.revert;
  split.revert = () => { 
    originalRevert.call(split); 
    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.

 

[anotheruser]

Woah , Thats works wonderful , Thanks a lot

[mattiasdominguez]

Hi!

 

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

[GreenSock]

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]

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]

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]

This was the solution from the linked thread

[oligsap]

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

[Cassie]

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]

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]

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

[Fifteen4]

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.

[GreenSock]

Sorry about the tardy response!

 

I just created a tweaked version of the helper function that improves things in many cases: 

See the Pen fa5a7eab886ae75c888e1f4dc157c299?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Better? Do you notice any other issues? 

[Fifteen4]

No worries! Thanks so much (as usual) for sorting this out.

I'll be firing up the repo in question over the next couple weeks, so I'll keep you posted!