tobimori Posted October 17, 2022 Share Posted October 17, 2022 When using a ScrollTrigger to create a horizontally scrolling section and linking to a section afterwards with an anchor link, the browser isn't scrolling correctly and stops at a section before the actual section. I recreated this bug in the Codepen. The interesting thing here is that when behind the horizontal section, the Anchor link stops correctly. So it must be something with the browser not getting the correct "length" to scroll because the horizontal section expands it. What could I do to fix this? See the Pen MWGRybO by tobimori (@tobimori) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 17, 2022 Share Posted October 17, 2022 Yep, that's because you're using a regular link and the browser has no way to correctly calculate the position when pinning is involved. But don't worry - we made a helper function for this: https://greensock.com/docs/v3/HelperFunctions#getScrollPosition Link to comment Share on other sites More sharing options...
tobimori Posted October 17, 2022 Author Share Posted October 17, 2022 4 hours ago, GreenSock said: Yep, that's because you're using a regular link and the browser has no way to correctly calculate the position when pinning is involved. But don't worry - we made a helper function for this: https://greensock.com/docs/v3/HelperFunctions#getScrollPosition Am I understanding correctly that this helper function would just give me the position of the animation at specific progress? I'm looking to scroll to a section outside the animation, that's afterwards in content (as you can see in the codepen I made). How would I go about getting that position? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 17, 2022 Share Posted October 17, 2022 Hi, There are a few things that are complicating this a bit more than expected. One of them is the fact that the section you want to scroll to using the link resides inside the element being pinned by ScrollTrigger, if possible move it outside that element. Another issue is that the getScrollPosition helper is doing exactly what is supposed to do, is giving you back the end position of the ScrollTrigger instance, but the problem is that you have an extra element after the ScrollTrigger target and before the section you want to scroll to, so you have to take that into account as well when getting the position of that particular section. I tried a few things and so far moving the target section outside the pinned parent element and using offsetTop to get the position seems to be the only one that is working all the time: See the Pen YzLMeqM by GreenSock (@GreenSock) on CodePen I'd recommend you to keep only the elements that will be targeted by ScrollTrigger inside the section that will be pinned in order to keep calculations simple and easy. Let us know if you have any other question. Happy Tweening! Link to comment Share on other sites More sharing options...
tobimori Posted October 17, 2022 Author Share Posted October 17, 2022 1 minute ago, Rodrigo said: Hi, There are a few things that are complicating this a bit more than expected. One of them is the fact that the section you want to scroll to using the link resides inside the element being pinned by ScrollTrigger, if possible move it outside that element. Another issue is that the getScrollPosition helper is doing exactly what is supposed to do, is giving you back the end position of the ScrollTrigger instance, but the problem is that you have an extra element after the ScrollTrigger target and before the section you want to scroll to, so you have to take that into account as well when getting the position of that particular section. I tried a few things and so far moving the target section outside the pinned parent element and using offsetTop to get the position seems to be the only one that is working all the time: I'd recommend you to keep only the elements that will be targeted by ScrollTrigger inside the section that will be pinned in order to keep calculations simple and easy. Let us know if you have any other question. Happy Tweening! The reason I'm pinning the whole page is to make the page look good on large screens without changing the design that much. I could make the horizontal container at least 100vh, but that wouldn't look as good as pinning the whole page. I made a small screen recording to show what I'm meaning: https://share.cleanshot.com/6huou3 Is there a way to have the section still centered with its own height, while keeping correct scroll links? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 17, 2022 Share Posted October 17, 2022 Hi, Yeah I see what you mean, that's quite a pickle to solve. You could try to give the horizontal section a relative position and add a completely empty div with height 100vh, width 100% and an absolute position in order to use that as the trigger so the horizontal section is always in the center. Something like this: See the Pen oNdOqwx by GreenSock (@GreenSock) on CodePen Unfortunately we don't have the resources to provide fully working solutions, but hopefully this provides a good starting point for this. Let us know if you have any other questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 17, 2022 Solution Share Posted October 17, 2022 Here's the helper function being used in your original demo: See the Pen JjvVxVV?editors=0010 by GreenSock (@GreenSock) on CodePen I just added the pinnedContainer as a parameter. I hope that helps. Link to comment Share on other sites More sharing options...
tobimori Posted October 20, 2022 Author Share Posted October 20, 2022 On 10/18/2022 at 1:26 AM, GreenSock said: Here's the helper function being used in your original demo: I just added the pinnedContainer as a parameter. I hope that helps. Thanks. This finally worked. 1 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