Jump to content
Search Community

scrollTo onComplete firing after the scroll has been completed.

inter123 test
Moderator Tag

Recommended Posts

For this example:

1. Click "scroll" button

2. Go back to top

3. Keep clicking "scroll" button

 

In the console, I am printing out the event listener for the "onScroll" function which is tracking the window scroll.

 

For some reason when the "onComplete" fires after the scroll is done, the "onScroll" function randomly sometimes runs again.

 

The last console log, will randomly sometimes randomly change to "false". Even though i would expect the behavior to always be "true". It seems that the "false" can be triggered randomly.

 

I am wondering if this behavior can be worked around?

 

Thank you

example.jpg

See the Pen povZmVa?editors=1111 by sbdev (@sbdev) on CodePen

Link to comment
Share on other sites

Hey inter123 and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

This demo is working exactly as I would expect it to. Can you please try re-explaining what you're trying to accomplish? And what part of it, specifically, is not meeting your expectations?

 

onComplete fires when the tween is done completing...

 

window.addEventListener("scroll", onScroll); will fire onScroll every time the page is scrolled, whether or not it's caused by the tween or user interaction.

Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

Hey inter123 and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

This demo is working exactly as I would expect it to. Can you please try re-explaining what you're trying to accomplish? And what part of it, specifically, is not meeting your expectations?

 

onComplete fires when the tween is done completing...

 

window.addEventListener("scroll", onScroll); will fire onScroll every time the page is scrolled, whether or not it's caused by the tween or user interaction.

Hi Zach thank you for the response.

My main question goes along the lines of:

 

1. onComplete fires after scrollTo is done and scrolling has supposedly stopped

2. my onComplete sets the variable: scrolling = false

3. How does "window onScroll" pick up "scrolling = false" sometimes, if supposedly the scrolling has stopped and the variable was not changed until after the scrolling was done?

Link to comment
Share on other sites

Ah, I understand what you mean now that you've added the image. You're saying that sometimes in the very last event caused by clicking the button (without the user manually scrolling them self) scrolling is false.

 

This is actually kind of tricky. What I believe is going on (I could be wrong): The window checks for scroll changes even n milliseconds (because it can't check every 0 milliseconds, that's impossible). This is somewhat asynchronous to GSAP's updates. Sometimes that check falls right between when GSAP updates the scroll position for the last time and the onComplete when scrolling is made false, which would report that scrolling is true. Other times, that check falls right after GSAP calls the onComplete callback, in which case scrolling is false

 

I don't think there's really a way to work around this using the current setup. However, I would do something like the below where GSAP is fully in control of reporting the status of scrolling because it's guaranteed to be in order like you expect.

See the Pen WNbgeZj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If, for some reason, you also need to have the scroll being listened to and that variable checked you could enable and disable it during the tween:

See the Pen YzPOKaP?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
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.
×
×
  • Create New...