ScrollTrigger with Repeated SplitText Loop

[pietM]

Good greetings, everyone! 

I have an enclosed pen with a simple fade on titles and images, but I can't get the SplitText element to repeat like the fade with ScrollTrigger.

Please let know if you have suggestions. 

Thanks! 
M

See the Pen MWKYzdm by euqio (@euqio) on CodePen

[ZachSaucier]

Hey pietM, welcome to the GreenSock forums and thanks for supporting GreenSock by being a Club GreenSock member!

 

What do you mean you can't get the SplitText to repeat? It seems to repeat the animation to me. 

 

By the way, this sort of typing effect is even easier with GSAP's TextPlugin.

[pietM]

Thanks for the quick response, Zach! 

 

I'm starting with a simple animation to understand the logic before elaborating a bit. The first caption DOES the correct behavior, but captions 2 and 3 do not. If you scroll to the second and third images, the captions don't trigger like the first. 

Thanks for your help! 
Very best, 
Michael 

[ZachSaucier]

Some notes:

• I would put the splitting within the forEach function for the captions. That way you have a reference to each individual split instead of only the collective. 
• In GSAP 3 we recommend using gsap.timeline(). The Lite/Max stuff is old from GSAP 2.
• Your stagger wasn't doing anything because you were selecting an individual letter. To make use of staggering, you should select all of the letters as the target. To learn more about staggers, check out the documentation.
• Generally speaking it's good to wrap related elements into a container element. In this case I think a <section> would be appropriate. You could even just iterate through each section instead of having multiple forEaches if you wanted to.
• I think my article on animating efficiently would be beneficial to you.

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

 

[pietM]

I really appreciate your explanation, Zach. 

Will spend some time with your article and documentation. 

Thanks again! 
M