Jump to content
Search Community

ScrollTrigger multiple SplitText not triggering with larger spacing

Jay George P test
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

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.
  • Create New...