Jump to content
GreenSock

rvp

Couple of issues with using SplitText in combination with ScrollTrigger

Go to solution Solved by OSUblake,

Recommended Posts

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)

 

image.thumb.png.d282548b998938f7e3e79496b5547be6.png

 

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

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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

  • Like 2
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.
×