braunsock Posted February 17, 2023 Share Posted February 17, 2023 Hello. I would like to trigger the horizontal scroll animation, but not use pinSpacing. But with pinSpacing set to false, the page scrolls underneath the pinned part. The part that scrub animates horizontally is shorter than the viewport height, and I want the content beneath it to remain still and visible while the horizontal scrub animation is happening. Is this possible? In my CodePen, I've tried using the pin: property on a wrapper, but this doesn't work. Its stops scrub animating too early. This seems to be because the page runs out of vertical scroll. I can added a bunch of extra vertical page length - but is this necessary? Any suggestions would be appreciated! See the Pen wvxbMOE by dan_default (@dan_default) on CodePen Link to comment Share on other sites More sharing options...
braunsock Posted February 18, 2023 Author Share Posted February 18, 2023 PS: I've noticed that every example I've found of ScrollTrigger/scrub/switch to horizontal scroll thing is displaying the scrolling part at 100% viewport height. Should I not even be trying to do this? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 18, 2023 Solution Share Posted February 18, 2023 You've got a collapsing margin issue (you've got margins on child elements that leak outside their parent container which uncollapses on pinning). I just added a 1px padding on the container, but you could do a 1px transparent border if you prefer. See the Pen KKxdwwE by GreenSock (@GreenSock) on CodePen I'm curious why you want pinSpacing false. Doesn't the demo above deliver the effect you want? And you wouldn't have to calculate the extra space manually. I hope that helps! 1 Link to comment Share on other sites More sharing options...
braunsock Posted February 18, 2023 Author Share Posted February 18, 2023 5 hours ago, GreenSock said: I'm curious why you want pinSpacing false I didn't know any better . I've now worked out how to do exactly what I wanted to do with your help, and less math! Thank you! The collapsing margins problem was not even on my radar yet - but I understand this has to do with that wrapping element that pinSpacing adds and perhaps more? Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2023 Share Posted February 18, 2023 6 hours ago, braunsock said: but I understand this has to do with that wrapping element that pinSpacing adds and perhaps more? It's not that it adds more. It's just that the pinSpacer element is set up in a way that'd protect against margin collapsing. Here's a simple CodePen that shows the issue - try enabling the padding-top: 1px on the .container element and watch how differently things render: See the Pen MWqamPO by GreenSock (@GreenSock) on CodePen The same happens if you put any border on the .container (instead of padding) 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