Jump to content
GreenSock

tyelrx

spiltText inquiry

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

I know this works but I'm not sure if there is a way to write this without so many lines of code and calling splitText more than once (since it's already split by line/char);

 

HTML:

<div id="txt2">And the perfect<br>Brandname card is<br>one click away.</div>

 

JS:

 

splitTxt2 = new SplitText(txt2, {type:"lines"});
linesTxt2 = splitTxt2.lines;
                
txt2L1 = new SplitText(linesTxt2[0], {type:"chars"});
charsTxt2L1 = txt2L1.chars;
txt2L2 = new SplitText(linesTxt2[1], {type:"chars"});
charsTxt2L2 = txt2L2.chars;
txt2L3 = new SplitText(linesTxt2[2], {type:"chars"});
charsTxt2L3 = txt2L3.chars;

 

 

Not sure why I can't just do this. I know you can give it a class for lines/words/chars, but then i'd have to query those. Just curious if I'm missing something.

 

txt2 = new SplitText(txt2, {type:"lines,chars"});

charsTxt2L1 = wordsTxt2.lines[0].chars;

charsTxt2L2 = wordsTxt2.lines[1].chars;

charsTxt2L3 = wordsTxt2.lines[2].chars;

 

 

thanks

 

Link to comment
Share on other sites

Hi tyelrx  :)

 

if i understood correctly , you can do something like this :

var text = new SplitText('#txt2', {type:"lines,chars"});

var tl = new TimelineLite()
  .to(text.lines[1],1,{x:100})
  .staggerTo(text.lines[1].querySelectorAll('div'),1,{x:100},0.2);

and for next time pls provide a Codepen Demo for your questions  :)

  • Like 1
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.
×