Jump to content
GreenSock

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

scrollTo onComplete firing after the scroll has been completed.

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

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank you for the detailed explanation, makes perfect sense. I just wanted to be sure I was understanding the behavior correctly. I believe your ideas will definitely help. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×