ScrollTrigger multiple SplitText not triggering with larger spacing

[Jay George P 1 Likes (Newbie)]

Hi GSAP peeps,

 

Please can someone enlighten me.

In the attached simple example I have a Split Text function that I would like to use repeatedly for headlines.

(Scroll down past the dummy div to see the text start to appear).

However, as soon as the spacing is a bit much it only triggers on the first instance—in this case I've set both font-size and padding to 5rem to illustrate.

 

If you switch the h2 font-size and padding values to 1rem instead, it works perfectly; triggering as each headline scrolls in.

 

Many thanks in advance for any help.

See the Pen NWwrYbw by JayGeorge (@JayGeorge) on CodePen

[GreenSock 18,578 Likes (Superhero)]

I noticed several problems: 

1. You were using a single animation (and split) for ALL of the <h2> elements. I assume you meant to have one for each of the <h2> so they can independently get triggered when they enter the viewport. Use a .forEach() for that. 
2. You had some funky start/end values. "top bottom-=20%" would be the same as "top 80%" and "top bottom-=60%" is the same as "top 40%". 
3. There's no need to use a timeline if that timeline will only have one tween in it. There's nothing WRONG with that - it's just slightly wasteful. 

I assume this is what you were going for(?):

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

[Jay George P 1 Likes (Newbie)]

Brilliant, thank you so much, I really appreciate the prompt solution!