Teebo Posted June 28, 2021 Share Posted June 28, 2021 Hi all, I need some guidance on what I might be doing wrong and if my approach is efficient I have recently asked a question regarding snapping sections on scroll The response from @akapowl was really helpful because it opened my understanding a bit and directed me to some light as I was lacking understanding of the ScrollTrigger plugin. I now have implemented what I wanted to achieve by following this pen ( See the Pen rNLOdbB by GreenSock (@GreenSock) on CodePen ) This works fine, however it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top. I am getting no errors and I see it sometimes happens on the demo from the pen. I am not sure why this is happening in need some guidance. Any suggestions or corrections will be much appreciate, thank you. See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted June 28, 2021 Share Posted June 28, 2021 6 hours ago, Teebo said: it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top. I am getting no errors and I see it sometimes happens on the demo from the pen. I can't reproduce any noticeable problems - can you please provide very details (and hopefully simple) instructions for how to reproduce the issue? I scrolled to the bottom and then back up. I don't see anything unexpected. It annoys me to have the autoKill: false behavior but I understand that's sometimes what developers want/need. If there's any way to provide a minimal demo that doesn't use a 3rd party framework like Angular, you'll significantly increase your chances of getting a helpful answer Link to comment Share on other sites More sharing options...
Teebo Posted June 29, 2021 Author Share Posted June 29, 2021 Hi, thank you for the suggestion. I have updated the question to include the CodePen project. I see the re-production of the issue Link to comment Share on other sites More sharing options...
Cassie Posted June 29, 2021 Share Posted June 29, 2021 Hi @Teebo This codepen seems to be working perfectly for me. Could you possibly explain or record a video of the issue (as Jack said) 14 hours ago, GreenSock said: I can't reproduce any noticeable problems - can you please provide very details (and hopefully simple) instructions for how to reproduce the issue? Link to comment Share on other sites More sharing options...
Teebo Posted June 29, 2021 Author Share Posted June 29, 2021 Hi @Cassie, thank you, Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen. You will notice the scroll will start automatically for all the sections up until the top. I thought it was due to the scroll start triggers being on view all the time but tried to give a value like: start: '90% bottom', But this does not solve the auto =matic backward scrolling. Please check carefully this pen: See the Pen BaRaqQL by Teebo (@Teebo) on CodePen I have added the markers so that it is easy to see Link to comment Share on other sites More sharing options...
Teebo Posted June 29, 2021 Author Share Posted June 29, 2021 Yes I think that the onEnterBack has a bug; please let me know if I am missing something 🙂 Link to comment Share on other sites More sharing options...
Cassie Posted June 29, 2021 Share Posted June 29, 2021 Hi @Teebo I can't see the bug and you haven't explained what it is that you're seeing. Can you please explain the issue more clearly or make a video recording? scrolldemo.mp4 This is what I see - chrome, magic mouse, mac - CodePen debug panel. Link to comment Share on other sites More sharing options...
OSUblake Posted June 29, 2021 Share Posted June 29, 2021 2 hours ago, Teebo said: Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen. You will notice the scroll will start automatically for all the sections up until the top. I see the same issue. When you scroll to the end of the document, and then scroll up once, it should just scroll to the previous panel and stop. However, once it scrolls that panel, it triggers again, and starts to scroll to the panel above that, and so on until it reaches the top. This behavior doesn't happen when switching to version 3.6.1. Only tested in Chrome on Windows. 2 Link to comment Share on other sites More sharing options...
akapowl Posted June 29, 2021 Share Posted June 29, 2021 25 minutes ago, OSUblake said: Only tested in Chrome on Windows. Interesting - I tested it like a dozen times on that combination and didn't get to reproduce it once, with mousewheel and arrow-keys that is. I can reproduce it with a trackpad - which I guess is to be expected, as it's the same as on mobile, where when you swipe in a direction, it will keep on scrolling depending on how intense that swipe was. Link to comment Share on other sites More sharing options...
Teebo Posted June 29, 2021 Author Share Posted June 29, 2021 @OSUblake version 3.6.1 does not solve the issue on my side Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 29, 2021 Solution Share Posted June 29, 2021 Apparently some browsers size things oddly, like in this case if you console.log() the innerHeight of the window and compare that to the offsetHeight of the panels, you'll see that even though the panels are set to 100vh, the browser may render them 1px taller! Since the code bases everything off of window.innerWidth including the scrollTo value, it ends up being inaccurate (1px drift for each panel, compounding as you go up). That's not a GSAP issue - it's a combination of a browser issue and logic flaws in the JavaScript that's assuming that the panels will be EXACTLY the same height as window.innerHeight. Here's a solution that simplifies things too, were you only need one ScrollTrigger for each section: See the Pen LYyENvY?editors=0010 by GreenSock (@GreenSock) on CodePen Does that work well for everyone? 2 1 Link to comment Share on other sites More sharing options...
Teebo Posted June 30, 2021 Author Share Posted June 30, 2021 Hi @GreenSock OK OK I see, thanks so much for this feedback. It works very well on my side; Thanks a lot 😃 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