Horizonal scrolling sections (scrolling too fast ruins the effect)

[DavidBrowne]

i'm struggling thinking this one through (or if it's even a problem that deserves solving 🤣, or just something that is going to happen regardless).

 

I've created a simple horizontal scroll with Scrolltrigger, pinning the main container to keep it fixed while the user scrolls any number of sections.

 

Works well, as i'm using the scrollwidth of the container, to make sure the entire container has moved across the viewport before the regular scroll kicks in again.

 

However, it's not the perfect solution (if there such a thing) because if the user scrolls slightly quicker than average, especially when going back up. The normal scrolling kicks in before the transform has finished.

 

30 second loom just to show the problem - https://www.loom.com/share/c74ff7bdee874dcaa239823ce05df07e

 

Is this just a built-in feature of pinning? I was expecting the transform to be matching the scroll position to the px, so it wouldn't matter about scroll speed. I can't think how to approach 'waiting for the transform to end' before allowing normal scroll, as obv that's not how the pinning is being implemented.

 

Anyway not a huge issue, but if anybody can point me in the right direction. Not looking for a solution being given to me, (honestly don't put your time into it) just interested if there's a something I'm missing, I'm keen to learn. if it's going to take a huge effort, i'll just accept the issue as something that isn't worth solving.
 

See the Pen PoZewOW by wplit (@wplit) on CodePen

[elegantseagulls]

This is happening because you have scrub set to 1, which causes a 1s catch-up delay. If you set scrub: true, it will tie your scrub directly to scroll and you won't have this 'catch-up'. You'll probably also want to make sure to use ease: 'none' on your tween to keep it tied linearly to scroll position.

[DavidBrowne]

Thanks. I was overthinking it and had completely forgotton that 1 is for a delay.