SplitText question, animate chars inside lines independenty?

[jesper.landberg]

Hi,

 

Is is possible in some straigh forward way to animate chars (or words) inside a line as an independent animation? Just stagger from the first word to the last in each line, rather than from the first word in the first line to the last word in the last line.. .. anyone understand?=)

 

const elem = new SplitText(el, { type: 'lines, words' })

TweenMax.staggerFrom(elem.lines, 1, { y: 20 }, 0.1}

And then
 

TweenMax.staggerFrom(elem.lines.words, 1, { x: 20 }, 0.1}

Rather than 
 

TweenMax.staggerFrom(elem.words, 1, { x: 20 }, 0.1}

 

Would I need to do a new SplitText on each elem.lines?

[Carl]

Not sure I fully understand. To animate the words in a single line you can target that line using a linesClass

var mySplitText = new SplitText("#quote", {type:"lines, words", linesClass:"lines++"}),
    tl = new TimelineLite();

//animate only the words in the first line
tl.staggerFrom(".lines1 div", 0.5, {opacity:0, scale:0}, 0.2)

 

See the Pen jZLjzw by GreenSock (@GreenSock) on CodePen

 

[jesper.landberg]

Just now, Carl said:

Not sure I fully understand. To animate the words in a single line you can target that line using a linesClass

var mySplitText = new SplitText("#quote", {type:"lines, words", linesClass:"lines++"}),
    tl = new TimelineLite();

//animate only the words in the first line
tl.staggerFrom(".lines1 div", 0.5, {opacity:0, scale:0}, 0.2)

 

See the Pen jZLjzw by GreenSock (@GreenSock) on CodePen

 

Ohh nice didnt know there was linesClass! Thanks!