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.