rpsstudios
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by rpsstudios
-
-
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.
See the Pen gOBbmKg by rpsstudios (@rpsstudios) on CodePen
-
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.
See the Pen gOdwVYY by rpsstudios (@rpsstudios) on CodePen
Moved pinned element before it pins causes jump
in GSAP
Posted
Thank you so much Jack! That definitely puts me on the right track.