Jump to content

Jay George P

ScrollTrigger multiple SplitText not triggering with larger spacing

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.