Batch ScrollTrigger + SplitText text reveal problem

[thoughtful.website]

I have a SplitText animation that works by itself: 

See the Pen QWdaXqK by yellowF00D (@yellowF00D) on CodePen

 It runs the animation for all H2 elements on the page. I however need it to animate when the user scrolls to the element so I though I could use ScrollTrigger and batch.

 

However am having issues with the implementation as currently it is not respecting the scroll position and then the animation also repeats/disappears. 

 

Any help would be greatly appreciated!

 

With batch:

See the Pen wvgpLJa by yellowF00D (@yellowF00D) on CodePen

[GreenSock]

You were animating ALL of the lines each time even one <h2> entered the viewport. I assume you wanted something more like this?:

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

 

Thanks for being a Club GreenSock member! 🙌

[thoughtful.website]

Thanks a lot, that is exactly what I was looking for.

[deepuiux]

On 4/11/2021 at 11:44 AM, GreenSock said:

You were animating ALL of the lines each time even one <h2> entered the viewport. I assume you wanted something more like this?:

 

 

 

Thanks for being a Club GreenSock member! 🙌

 

 

 How can we add toggleAction In this ?

[GreenSock]

3 minutes ago, deepuiux said:

 How can we add toggleAction In this ?

There's no such thing for .batch() because it wouldn't make any logical sense with batching. But if you're just trying to create an animation for each one and have toggleActions for each of those, that should be pretty easy:

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