Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
djarosz

Scroll Trigger with Snapping sections causing issues with Back to top Button

Recommended Posts

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 post
Share on other sites

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!

Link to post
Share on other sites

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 post
Share on other sites

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. 

  • Like 1
Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

 

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 post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×