rvp Posted January 11, 2022 Share Posted January 11, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted January 11, 2022 Share Posted January 11, 2022 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 More sharing options...
rvp Posted January 11, 2022 Author Share Posted January 11, 2022 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 More sharing options...
Solution OSUblake Posted January 11, 2022 Solution Share Posted January 11, 2022 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 2 Link to comment Share on other sites More sharing options...
rvp Posted January 11, 2022 Author Share Posted January 11, 2022 Thanks a ton for your help @OSUblake! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now