Jump to content
Search Community

Split text confused

anotheruser
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

anotheruser
Posted

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.

Posted

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
anotheruser
Posted

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>

Posted

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

 

 

  • Like 3
anotheruser
Posted

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.

 

Posted

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.

 

  • Like 8
  • Thanks 2
anotheruser
Posted

Woah , Thats works wonderful , Thanks a lot :)

  • Like 1
  • 2 years later...
mattiasdominguez
Posted

Hi!

 

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

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

  • 1 year later...
mattiasdominguez
Posted
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 => 

 

  • 6 months later...
Posted

This was the solution from the linked thread

Posted

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

Posted

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.

  • 10 months later...
Posted

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.

  • 1 month later...
Posted

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!

  • Like 1

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