Share Posted February 3 Hi everyone! I try to create a kind of tabs animation, with pinned sections on scroll. It works fine, but when I scroll back to the top to unfold the tabs, I have a small glitch/white space between each pinned section. I don't know how to avoid that. Thank you for your help. See the Pen VwBgjRW by PaulettePaillette (@PaulettePaillette) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 3 Do you have a screenshot of this gap? What you also could try is making one ScrollTrigger with the animation you want instead and pinning the whole container, more like this example Link to comment Share on other sites More sharing options...
Share Posted February 3 Hi, Also please provide information regarding browser and OS where you're seeing this behaviour as it's fundamental to pinpoint the issue. I don't see anything in Firefox and Chrome on Ubuntu 20/22. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted February 4 Hi, It's more visible when you're on fullscreen. You can see it on this video : https://streamable.com/k3n3i1 I'm on Chrome the latest version (102). Thanks Link to comment Share on other sites More sharing options...
Share Posted February 4 Hi, I just tried the debug URL (no iframes) on Chrome 109 and Firefox 109 n Ubuntu 20 and 22 and I don't see any white space: https://cdpn.io/pen/debug/VwBgjRW If you could provide information on the OS would be great. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted February 5 Thanks for your answer. I'm on masOS Catalina, MacBook Pro (Retina, 15-inch, Early 2013), processor 2.7 GHz quad-core Intel Core i7, memory 16 Go 1600 MHz DDR3, Intel HD Graphics 4000 1536 Mo. Thanks Link to comment Share on other sites More sharing options...
Share Posted February 5 I can't replicate the problem either, and I'm on MacOS. Small thing: end: "center" is not valid. It's supposed to have two values in the string - the first refers to the trigger element, and the second refers to the viewport. Like end: "center top" would mean "when the center of the trigger hits the top of the viewport" Link to comment Share on other sites More sharing options...
Author Share Posted February 6 Thanks for your answer. I corrected the end part and I tried my codepen on an other computer and it looks good, no weird gap. So it must be from my mac. The bug is visible on mobile device too. Thanks 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