rvp

Thank you @mikel - much appreciated!

Oh, good to know. Thanks @OSUblake

Hey guys, Quick question regarding ScrollTrigger toggleActions. Am I wrong in thinking that in the codepen I've provided the animation is supposed to play in reverse when hitting the onLeave event? I am trying to achieve the following behavior: the text scrolls into view and it appears then disappears when we leave the scrollTrigger limits but I don't understand why it remains visible when we see 'Leaving' in the console. Your help would be much appreciated!

Thanks a ton for your help @OSUblake!

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 ( https://codepen.io/RVP22/pen/WNZYbBL ) the problem is gone. Is SplitText not supposed to be used with a pinned ScrollTrigger or is that a bug?

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.

Awesome - thanks for the tip @GreenSock!!

Thank you very much @Cassie! Very informative reply - all is clear now!

Hey guys, This is a general question - I am trying to understand how the position attribute is converted to scroll distance when a timeline is hooked up to a scrubbed ScrollTrigger. So if we take a look at the CodePen below, we first show the "home page" and then 10 seconds later we hide it to the side. tl.from('.page-home', { xPercent: -100 }).to('.page-home', { xPercent: 100 }, "+=10") This is meant to work with a time delay (i.e. wait 10 seconds before moving the page to the right) but when apply a ScrollTrigger with the scrub option enabled, our animation is now linked to the scroll position so the +=10 is no longer a time delay. Could someone please explain how is the "+=10" position attribute converted to a scroll distance / pixels? I'm trying to understand if this is the right approach to tell ScrollTrigger "wait X pixels in this position before continuing" or if I'm meant to use something else. Your help would be much appreciated!

Thanks for taking the time to look into this @OSUblake! That indeed was the solution! Much appreciated!

Hey guys, I came across the following issue: the provided codepen contains a simple ScrollTrigger layout. I believe the gsap-generated `pin-spacer` div causes a horizontal scrollbar to appear on the page. So to hide that scrollbar I've tried adding `overflow-x: hidden` to the body element but for some reason that seems to also hide the vertical scrollbar and therefore disables page scrolling altogether. To reproduce, just enable the `// overflow-x: hidden;` line and observe how both scrollbars will be hidden. So am I doing something wrong here or is this a GSAP bug? My main goal is to remove the horizontal bar without breaking vertical scrolling and I can't seem to achieve it so far. Any input would be appreciated!