With GSAP SplitText, how to animate the words of each line in the same time ?

[Harold AO 6 Likes (Newbie)]

Hi team.

I'm wondering how to animate the words of a line individually. E.g: "In this demo, we're" (first line) should start animating each word at the same time as the words of the 2nd line ("Gonna see how to make"), etc...

See the Pen zYmjJEy by haroldao (@haroldao) on CodePen

[PointC 14,466 Likes (Superhero)]

You'd need to loop through each line and select the bottom/top .char in those lines and start all tweens at 0. Something like this.

See the Pen b300c7bf37ea7a9567e1733d87bbbe30 by PointC (@PointC) on CodePen

 

Just FYI - you had an ease on the timeline itself, but timelines don't have eases. I moved that power4.inOut ease to the defaults for the timeline so it would be applied to each tween.

 

Hopefully that helps. Happy tweening and thanks for being a club member.

 

 

[Harold AO 6 Likes (Newbie)]

2 hours ago, PointC said:

You'd need to loop through each line and select the bottom/top .char in those lines and start all tweens at 0. Something like this.

 

 

 

Just FYI - you had an ease on the timeline itself, but timelines don't have eases. I moved that power4.inOut ease to the defaults for the timeline so it would be applied to each tween.

 

Hopefully that helps. Happy tweening and thanks for being a club member.

 

 

Thank you so muchhhhh🔥🔥😍

[GreenSock 18,876 Likes (Superhero)]

Yep, @PointC is exactly right. 

 

Here's a slightly different way to structure it (not necessarily any better): 

See the Pen wvYxaMq?editors=0010 by GreenSock (@GreenSock) on CodePen

[Harold AO 6 Likes (Newbie)]

4 minutes ago, GreenSock said:

Yep, @PointC is exactly right. 

 

Here's a slightly different way to structure it (not necessarily any better): 

 

 

ty ! I'll take a look !