trigger splitText within a slide show.

[iammarkmulvey 4 Likes (Newbie)]

How do I trigger splitText within this slide show so the animation only happens when slide is in view?

See the Pen aymoYa by markmulvey (@markmulvey) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demo. Very helpful. 

Probably a bunch of ways to do this, but what I came up with keeps most of your code intact.

I did the following:

 

1. looped through each slide to split it's text and create a timeline animation for each slide
2. assigned each slide element a "myTween" variable which references its animation
3. I used an onComplete callback on the tween that introduces each slide to trigger that slide's myTween animation
4. When a slide is done moving offscreen I use an onComplete callback to pause that slides animation at the beginning (text hidden).

Give it a look:

 

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

 

[iammarkmulvey 4 Likes (Newbie)]

thanks Carl. now how do I do the alternating lines version of the split text within your code?

See the Pen gqAmk by GreenSock (@GreenSock) on CodePen

I can't figure out how/where to replace the chars version you did as a demo.

 

Again thank you.

[Carl 9,066 Likes (Superhero)]

The good news is we recently added a cycle property to stagger tweens that allows you to do that effect in much less code!

 

tl.staggerFrom(split.lines, 0.5, {opacity:0, cycle:{x:[100, -100]}}, 0.2);

 

Watch the video here: https://greensock.com/gsap-1-18-0 (same info in docs for stagger methods too)

 

Demo:

 

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

 

Thanks for bringing that old pen to our attention. I removed it from the SplitText collection and added a new one using cycle.

[iammarkmulvey 4 Likes (Newbie)]

Cool. Thanks Carl