Stagger simultaneous timelines

[BenGoshow]

I have 6 lines of text. I'm staggering the fade-in animation for each line using .stagger().

At the same time, I'm splitting each line of text up into characters using SplitText(), then fading those characters in also.

What I can't figure out is how to start the character animation for each line when that line begins fading down/in, instead of running all the line animations first, then running all the character animations.

See the Pen gOrOoOv by bengoshow (@bengoshow) on CodePen

[PointC]

Hi @BenGoshow 

 

Welcome to the forum.

 

I'm not quite following the effect you're after here. Are you trying to stagger each line and each letter in that line at the same time. With the from opacity of 0 on each letter, you won't see the line tween. There's also a negative y tween on each line and each letter. Is that correct? I'm also wondering if you meant to use a position parameter of 0 rather than "+=0". 

 

If you could add some more details to the desired behavior, I'm sure we can point you in the right direction.

 

Happy tweening.

 

[BenGoshow]

Yeah, it's hard to describe exactly. I've modified the original pen to show the character animation more distinctly. I think the only difference I'd like to achieve is for each line to start animating in when the line before is about halfway done, instead of directly after.

[ZachSaucier]

One way to do it:

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

[BenGoshow]

@ZachSaucier I like that! So you're looping through the "lines" array one at a time, and then animating each child "character" div? Did you change anything else?

[ZachSaucier]

6 minutes ago, BenGoshow said:

So you're looping through the "lines" array one at a time, and then animating each child "character" div?

Yep!

 

6 minutes ago, BenGoshow said:

Did you change anything else?

Nope! Not other than the position parameter to get it to work with the new setup. Oh, and splitting by lines instead of words. I'm not sure why you were splitting by words.