Couple of issues with using SplitText in combination with ScrollTrigger

[rvp]

Hey everyone,

 

I've been struggling with something and after much tinkering I still haven't been able to figure out what I'm doing wrong.

 

The main issue that I'm having is that the second h1 title (#t2 h1) in the codepen will not show up / animate like the first one and looking at the markers it seems that it should be working and it should be showing up.

 

The second issue in the same code pen is more of a question - I've pinned my #t1 h1 element and just after we cross the end of the scrolltrigger for that element (below)

 

 

the title will jump up because it's no longer pinned and it will restore to its original position. Could someone advise me if there is a recommended way on how to avoid this jump?

 

Any help would be much appreciated.

See the Pen NWaEWwb by RVP22 (@RVP22) on CodePen

[OSUblake]

Hi rvp, 

 

Try setting pinSpacing: false on your triggers. Pinning works a little different inside flexbox.

 

Also, the correct way to create a timeline is like this. core is for internal use.

 

let tl = gsap.timeline();

 

If you're using TypeScript and need the type before creation you can do this.

let tl: GSAPTimeline;

 

[rvp]

Thanks @OSUblake - adding pinSpacing: false did resolve my second issue.

 

Also thanks for pointing out the correct GSAP TS modules and types - I've updated my code accordingly. Even after those changes I still have not been able to resolve my initial problem where the second header doesn't show on the page.

 

I did notice something though. If i disable the pinning ( 

See the Pen WNZYbBL by RVP22 (@RVP22) on CodePen

 ) the problem is gone. Is SplitText not supposed to be used with a pinned ScrollTrigger or is that a bug?

[OSUblake]

It works, it's just being pushed down due the pinning. It would probably better to pin the container, kind of like this.

 

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

[rvp]

Thanks a ton for your help @OSUblake!