Jump to content
Search Community

spiltText inquiry

tyelrx test
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

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);



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




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;





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()

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.
  • Create New...