djarosz Posted May 4, 2021 Share Posted May 4, 2021 Hello GSAP Team, I'm new to Scroll Trigger and having issues trying to scroll back to the top of the page. I've created a snapping section in the middle of the page that acts like a "road block". That works well. At the bottom of the page, I have a button that scrolls you user back to the top of the page when clicked on. Here lies the issue. Once the scroll reaches the top of the page, it then starts scrolling back down to the snapping section. I need it to stay at the top with out it scrolling back down. Thanks! See the Pen abJoyjJ by DariuszJ (@DariuszJ) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 5, 2021 Share Posted May 5, 2021 Hey @djarosz, I think using ScrollTrigger's disable() functionality during the 'back-to-top' animation, then re-enabling it onComplete might be your best bet here. https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() 1 Link to comment Share on other sites More sharing options...
djarosz Posted May 5, 2021 Author Share Posted May 5, 2021 Hi @elegantseagulls, Thank you for getting back to me so quickly and looking into the issue. In my codepen example I'm using the disable() functionality on the click event of the "back-to-top" button and then onComplete of the scroll using enable() functionality. // Scroll to top Button const scrollTopBtn = document.querySelector('.btn-top'); var enableGsap = function () { ScrollTrigger.getAll().forEach(test => test.enable()); } scrollTopBtn.addEventListener('click', function () { ScrollTrigger.getAll().forEach(test => test.disable()); gsap.to(window, { duration: 1.5, scrollTo: { y: 0, x: 0, autoKill: true }, onComplete: enableGsap }); }); Let me know if I'm doing something incorrectly. Thanks! 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 6, 2021 Share Posted May 6, 2021 Ah! I see that now. Very strange: It looks like when you enable the ScrollTrigger after the scroll to top, it's triggering the onEnterBack for each section and the onEnter for the first section. @GreenSock - any thoughts here on why these callbacks are being triggered? Link to comment Share on other sites More sharing options...
GreenSock Posted May 6, 2021 Share Posted May 6, 2021 Yeah, that's because it remembered the state of the ScrollTriggers from when you disabled them. So if their progress was all at 1 when you disabled them, and then you scroll the page all the way back to the top and then enable() them, that means their progress just went from 1 to 0, triggering the onEnterBack. And then it jumped to that first section because of your onEnterBack on the last one that triggered. I've updated ScrollTrigger so that by default, it resets the progress values when you re-enable. You can test out a preview at https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, you could add these (undocumented) lines of code before your enable(): test.enabled = true; test.revert(); test.enable(); (that's totally a hack, though - there's no guaranteed support for that in future versions ) Or you could add logic in your code to ignore the calls when a flag is set (set it before and after you .enable()). Or just use the new beta version. 2 Link to comment Share on other sites More sharing options...
djarosz Posted May 6, 2021 Author Share Posted May 6, 2021 Thanks for helping out and making updates the ScrollTrigger.min.js file. I'll use the new beta version moving forward. I appreciate effort and thanks again. 2 Link to comment Share on other sites More sharing options...
djarosz Posted May 7, 2021 Author Share Posted May 7, 2021 Just to piggyback on this same topic. -On page reload/refresh or when I'm navigation back to the page it takes me back down to the ScrollTriiger section with the callbacks. @GreenSock - anyway to prevent the "onEnterBack" callback from firing on page reload/refresh? Link to comment Share on other sites More sharing options...
akapowl Posted May 7, 2021 Share Posted May 7, 2021 Hey @djarosz I'm not 100% sure if that solution will work in your case, but you could try and use a check on a boolean variable inside the callbacks to prevent the ScrollTriggers from firing on page-load just as suggested in this thread here - which is dealing with a pretty similar scenario as yours, if I am not mistaken. Maybe give it a shot and let us know if it helps. Link to comment Share on other sites More sharing options...
GreenSock Posted May 8, 2021 Share Posted May 8, 2021 I'm not sure I follow, but if you want to skip callbacks "above the fold" on initial load: ScrollTrigger.config({ limitCallbacks: true }); Are you seeing this issue in this CodePen? See the Pen 86b233eb8bdaa76f51bccf3e49c73650 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
djarosz Posted May 12, 2021 Author Share Posted May 12, 2021 Thanks for the reply back. The issue is not in CodePen. It's happening when you're on an actual webpage and you try to refresh/reload the page after scrolling past the snapped sections. The result: On refresh/reload takes the user back to the snapped section. Link to comment Share on other sites More sharing options...
GreenSock Posted May 12, 2021 Share Posted May 12, 2021 6 hours ago, djarosz said: The result: On refresh/reload takes the user back to the snapped section. Wait...are you saying that when the page refreshes, you want it to force the user back to the very top? 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