Jump to content
Search Community

ScrollTrigger missing triggers on fast scroll

evomedia.lt test
Moderator Tag

Recommended Posts

Hello,

 

we're trying to replace AOS plugin with scrollTrigger as majority of our animations are done in GSAP family of plugins. Right now we're trying to figure out a way for scrollTrigger to put class on elements that are scrolled by, however none of the exposed events give us reliable results. There's a codepen example attached to the post along with a gif animation of what we're getting.

The panel on the left shows scrollTrigger activities for each slide and is represented by following signs:
Toggle Event: red border around box,
Enter event: box with E
Enter Back event: box with EB
Leave event: small with L
Leave back event: box with LB

 

As you can see from the gif bellow, if the scroll happens fast enough most if not all events get ignored and thus the class isn't set for the elements left above the scroll position. Is there any sort of event that would fire once the element has passed scroller-start or scroller-end point regardless of the speed of scroll?

j6KXMjJ.gif

See the Pen YzqMxeE?editors=0010 by driezis (@driezis) on CodePen

Link to comment
Share on other sites

39 minutes ago, ZachSaucier said:

Hey evomedia. Why not use a regular ScrollTrigger for each section? Why do you need .batch() here?

 

Hello ZachSaucier,

Thank you for a fast response.
We used batch() merely for the convenience of using single selector for the triggers. We had no idea that the functionality of setting things in batch and individually would differ.

Your edit of the example works perfectly.  Thanks :)

Link to comment
Share on other sites

Just for clarity, the whole point of .batch() is that it will batch the callbacks, meaning that (for example) if you scroll really fast that could result in multiple elements entering/leaving the viewport, so ScrollTrigger will batch those together into an Array and pass those to the callback. It looks like your code was assuming there would only be ONE element passed in. See what I mean? 

 

You'd just need to alter your code to accommodate the batching. Here's one that @ZachSaucier whipped together: 

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

 

Does that clear things up? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

59 minutes ago, GreenSock said:

Just for clarity, the whole point of .batch() is that it will batch the callbacks, meaning that (for example) if you scroll really fast that could result in multiple elements entering/leaving the viewport, so ScrollTrigger will batch those together into an Array and pass those to the callback. It looks like your code was assuming there would only be ONE element passed in. See what I mean? 

 

You'd just need to alter your code to accommodate the batching. Here's one that @ZachSaucier whipped together: 

Does that clear things up? 

 

Hello Jack,

thank you for clarification. You are right, we thought the callbacks were for just the one element. This whole thing cleared up a lot, will be a great help in the future.

Link to comment
Share on other sites

  • 1 year later...
On 10/5/2021 at 8:42 AM, donrusvlad said:

On fast scroll onEnter, onLeave fires as needed each time, but onToggle callback works unreliable and may not fire.

That is the correct behavior. Think about a scenario where you scroll so fast that the element goes from off-screen above to off-screen below; the onEnter and onLeave should fire (it blew past both), but onToggle is only supposed to fire when the ScrollTrigger actually toggles from inactive to active or the other way around. But in this scenario, it goes from inactive (above) to...inactive (below). No toggle. 

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...