spiltText inquiry

[tyelrx]

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

 

[Diaco]

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