seanP Posted January 2 Posted January 2 Hello, I'm trying to create a diagonal scrolling effect on a large div. I have a wrapper div that is pinned and hides the overflow, and a grid div to diagonally scroll over. My problem is that despite setting pinSpacing to false, if you scroll down to the end of the animation pinspacing is suddenly set to true, and the page is doubled in length. This spacing does not appear before reaching the bottom of the animation, as indicated by the scroll bar. Any help is appreciated. See the Pen pvzWXzX by Seanparko (@Seanparko) on CodePen.
Solution akapowl Posted January 2 Solution Posted January 2 Hello there, Sean. I think the core of the problem in this case is that you have no height set to your wrapper element; which from what I understand you want to achieve should probably have a height of 100dvh. The end you have set for the scrolltrigger ('bottom bottom') then would trigger at the same time as its start though, so you will have to use something differrent as the value for the end - something like '+=200%' - and you will actually want to have pinSpacing set to true. All that changed results in this, which looks to be working better when scrolling until the end, right? See the Pen jENGgwB by akapowl (@akapowl) on CodePen. 3
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