ScrollTrigger progress when using a mousepad

[victorcngo]

Hello! I implemented a ScrollTrigger with a pin that takes twice the window.innerHeight before unpinning. While my element is pinned, I need to create an animation based on the progress.

 

    ScrollTrigger.create({
      trigger: '.c-slideshow',
      pin: true,
      end: '+=' + window.innerHeight * 2,
      onUpdate: (self) => {
        if (self.progress < 0.3) {
          setIndex(0)
        } else if (self.progress < 0.6) {
          setIndex(1)
        } else {
          setIndex(2)
        }
      },
      onLeave: () => {
        clearInterval(interval)
      },
      onEnterBack: () => {
        createInterval(5000)
      },
    })

 

To keep it simple, I set a slideshow index based on the progress value available inside the onUpdate hook. This works as expected, but I noticed that if I input an important amout of scroll (I can do this with a mouse, but it's mostly happening when using a mousepad), I quickly reach the end of my pin and the progress value reaches its maximum in no-time, resulting in incrementing my index too quickly.

I don't know what I can, or how could I prevent these behaviours.

[GreenSock]

Hi @victorcngo

 

I'm not quite sure what you're asking here - are you trying to prevent the user from scrolling quickly? That sounds problematic to me (as a user, I would HATE it if a web site prevented me from scrolling where I wanted). You'll significantly increase your chances of getting a good answer here if you provide a minimal demo, like a CodePen or Stackblitz with the simplest possible reproduction of the problem. 

 

Also, that technique of using an onUpdate to change the index looks very inefficient to me. I think there are better ways to do it. Once you provide a minimal demo, we can fork it and show you.