Jump to content
Search Community

GSAP ScrollTrigger onEnter delayed in certain browsers

OneDoBit test
Moderator Tag

Recommended Posts

What I am trying to do here, is to create kind of a stopper on the ScrollTrigger
So when I reach onEnter, my logic is, the scroll will go up by 1px right before Trigger and will not let the user go lower than the trigger

I was able to get this working on Windows Chrome, works completely fine
But on MacOS in Chrome it just keeps going past this stopper

I could see the console log once but it looked like the onEnter gets delayed and doesnt react on time

 

In codepen you can see kind of a representation of what is happening if you go really fast it will just jump over, but if you go slowly it will do exactly what I need

 

PS. In codepen even on Windows it's delaying

See the Pen XWRzwXv by OneDoBit (@OneDoBit) on CodePen

Link to comment
Share on other sites

ScrollTrigger is extremely optimized for performance because scrolling and animation are the most performance-sensitive parts of UX. Part of that is using passive scroll event listeners which basically means promising that our event handlers won't call .preventDefault(). That can really help the browser speed things up. Otherwise, it has to wait until the function is called (tied to the main thread) and see if .preventDefault() is called before it can perform the scroll. 

 

The behavior you're trying to implement is directly contradicting that. And your code is running out of that event lifecycle. Also keep in mind that most modern browsers handle scrolling on a completely different thread which can actually be quite a headache. So in your demo, if you scroll very quickly you may fly right past the onEnter and it gets called but then the other thread is racing ahead and pushing the scroll further down (because .preventDefault() wasn't called on the event). 

 

Here's a demo that uses a non-passive listener:

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

 

Is that what you're trying to do? 

 

Side note: as a user, this behavior would really annoy me 😬 but that's just my personal opinion.  

Link to comment
Share on other sites

Thank you for explaining this to me and showing a great demo!
I will definitely try this on the upcoming days.

So far looks exactly how I need it to be done!!!

 

Side note: this behavior really annoys me too...but it's not my choice to make🙃

  • Like 2
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...