rpsstudios

Thank you so much Jack! That definitely puts me on the right track.

Hey @Cassie, both items need to be independently pinned, so I don't think a single timeline would work. My example gets me really close, it's just an issue that the first timeline won't adjust the pinning on the second element after it moves.

I'm working on an animation where we have a 100vh height block that gets pinned and then we have a gradient bg that grows while it gets pinned. Since the current element is full-height I want to bring the next pinned section up underneath it before it gets pinned. I can get the first pin to work, and I can hug the next section up to it with a simple y animation. The catch is that this causes the next pinned element to jump once it hits the spot it was originally supposed to pin at. Is there a different way to handle this, or maybe I'm just asking too much.

I was 100% looking at your Codepen. It's not adjusted in any way. I have clicked on "Develop > Clear Caches" a few times. One time while on the page. Another with no tabs open and then I visit the Codepen. Then I tried a private window. I disabled any extensions I had enabled and then cleared the cache one more time and tried it again. I did have a MacOS update, so I upgraded to Ventura 13.2.1 and Safari 16.3 and that didn't help. I would be happy to jump on a screen share to show you.

I can't replicate this on other devices, so it's just something with my browser.

I was definitely using your Codepen. I'm on an M1 MacBook Pro with the latest version of MacOS and Safari at the time. In any case, I ended up finding a workaround so I don't need to use the scroller property. Thanks again for your input.

Thank you so much for the detailed explanation! That all makes sense. Your Codepen is still showing the same jittery ghosting effect I was seeing previously. Here's a quick video to show what I am seeing. Can you confirm that ScrollSmoother will definitely help with this? This is the first time I had a need to use the scroller option for a ScrollTrigger. Maybe I just need to find a solution that sticks with the browser scrollbar.

Check out the CodePen example. I'm using ScrollTrigger with the scroller property set to a div. As you scroll down you'll notice that the text and scroll end/start makers are VERY jumpy. This only seems to be an issue when using the scroller property. If I remove that property so the scroller is tied to the window then everything works as expected. Has anyone else experienced this? This issue is much worse in Safari on a Mac, but it's still there on Chrome.