Delaying the next scroll in ScrollTrigger by completely disabling scrolling for 100ms

[captainforg]

Hi, thanks for putting out a great library that does so many things so well but there's one thing I haven't been able to figure out - how to put a delay between two scroll events in ScrollTrigger? I know about the position parameter in ScrollTrigger and that is not what i am looking for since if the user scrolls very fast on a trackpad/mobile screen the animation completes very quickly.

 

This is the reference which I am trying to recreate:

https://www.sai-tex.com/circularity/

If you scroll down once, you are presented with a circle which only moves one step forward each time i scroll, no matter how fast I scroll on my trackpad.

 

I have tried searching many forum posts here but haven't been able to find any post which describes this behavior. As far as I can understand I need to call ScrollTrigger.create() on my animation with some callback functions inside this create() function that move to the next part of my animation and disable scrolling for 100ms.

 

How would I go developing something like this? Any help would be greatly appreciated. Thanks

[GreenSock]

Welcome to the forums, @captainforg! That sounds like the perfect use case for Observer. Here's the demo from the docs that should make it pretty clear:

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Have fun!

[captainforg]

Hello @Jack. Thanks for the quick help. Once again GSAP astounds with how simple it is to create such diverse and incredible animations 😀

 

I have already achieved the effect that I want in 15 minutes, one last thing, Observer does not seem to support pin that ScrollTrigger normally supports. I have tried to create a separate ScrollTrigger just to pin my container but then again when I scroll really fast the container div of the animation that I want to remain pinned flies off the screen. I can extend the end marker of this pinned scroll trigger further away but asking this if there is a cleaner way of pinning while using Observe?

56 minutes ago, GreenSock said:

Welcome to the forums, @captainforg! That sounds like the perfect use case for Observer. Here's the demo from the docs that should make it pretty clear:

 

 

 

Have fun!

 

Edited March 2, 2023 by captainforg
Adding further information

[Rodrigo]

Hi,

 

Without a minimal demo is not a lot we can do in order to help. What you could check is the preventDefault configuration option for the Observer Plugin:

const bannerObserver = Observer.create({
  target: "#banner",
  type: "wheel,touch",
  preventDefault: true, // <- Here
});

 

Here is an example that combines that functionality and ScrollTrigger to prevent scrolling for a certain amount of wheel events:

See the Pen oNPBpLM by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Please beware that preventDefault: true is intentionally not a documented feature of Observer. It is primarily for internal use. It does not preventDefault() on the "touchstart" event on mobile because doing so would prevent side-scrolling on iOS for example. I just want to manage expectations, that's all. 

[captainforg]

Thanks for the help guys, I wasn't able to solve it completely though. Temporarily I just created multiple gsap match media queries with another ScrollTrigger that pins the section but that is obviously not accurate since different users might scroll up & down with different speeds. I would probably revisit this later to ensure that pinning occurs "exactly" for 8 scroll ups Or 8 scroll downs and will share a codepen as well over here.