Missed scrollTrigger progress on fast scroll problem. Please help urgent.

[Ashish Sharma]

Sandbox Link : https://codesandbox.io/s/focused-blackwell-hkw5p6?file=/src/App.js

I have used scrollTrigger to to slide the swiper carousel whenever progress is equal to 45 and 99 ( actually I have multiplied the progress by 100) in both direction (i.e 1 or -1). But there is a little problem with this when you will scroll the page slightly fast sometimes the 45 or 99 dont come in progress due to fast scroll ( you can see this in sandbox attached and progress in console ). If you will suggest to keep the percentage not exactly 45  and 99 then I dont want to my swiper slides to be slide more than 2 times thats why I have used it. Actually problem happening  due to speed of scroll due to which sometimes certain numbers of scrolls skipped which affect to skip the swiper. 

 

Please give me the solution where I can optimize my code.

[Cassie]

Hiya!

 

Seems a bit fragile, I'd probably try and set up a separate trigger with the markers exactly where you want the transition to happen, and then tap into those callbacks if I were you. Maybe something like this could work?

https://codesandbox.io/s/bold-stallman-jtpn9y?file=/src/App.js:1150-1151

Just a heads up that your index values for the slides seem a little off.

[Ashish Sharma]

I need one more help !! mvaneijgen and @Cassie

Yes thanks @Cassie,  that's working better than before and let say we we have 4 slides which we want to slide on 25%,50%, 75% and 100% then what could be possible change in your solution. Actually I am very beginner in GSAP and I will learn it whenever I got time but for now if you could provide me solution it will be helpful.

[GreenSock]

Here's another approach that just uses a timeline with callbacks that you set up at each spot: 

https://codesandbox.io/s/youthful-noyce-ss7g9f?file=/src/App.js

 

So you can put whatever you want into this Array as the trigger spots for next/previous: 

// 45% and 99%
let progressPoints = [0.45, 0.99];

So you can change that to: 

// 25%, 50%, 75%, 100%
let progressPoints = [0.25, 0.5, 0.75, 1];

I hope that helps.