How To Stagger Scrub Animations inside a Loop?

[BPV]

I am trying to create an effect like the one for the introduction text that fades in one word at a time: https://www.refokus.com/

 

I'd like the effect to scrub and stagger like the example and be applied to multiple headlines but I'm getting stuck when I try to put this in a loop.

 

I have another example here with that attempt:

See the Pen JoPZmWJ by zoladesigners (@zoladesigners) on CodePen.

 

I feel like this is a pretty simple use case but couldn't find a reference for something similar anywhere. I'd appreciate anyone that could point me in the right direction for what I am doing wrong. If any other info would be helpful please just let me know thank you!

See the Pen RNbJeNQ by zoladesigners (@zoladesigners) on CodePen.

[Rodrigo]

Hi,

 

The main problem is that you're creating just a single SplitText instance for all the text blocks, you should create a SplitText instance for each one.

 

Maybe something like this:

See the Pen KwPeJVO by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[BPV]

Thank you! I appreciate the assist.