jesper.landberg

SplitText question, animate chars inside lines independenty?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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)

 

 

  • Like 4

Share this post


Link to post
Share on other sites
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)

 

 

Ohh nice didnt know there was linesClass! Thanks!

Share this post


Link to post
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.