shuggs

I've troubleshooted it a bit... there seems to be an issue with how trigger.scroll() is working for me across different browsers. On chrome trigger.scroll(1) actually moves the scroll position to 0, causing the subsequent scrollTrigger update to wrap backwards (hence lock the carousel in place). Whereas on firefox, trigger.scroll(1) moves the scroll position to 1 as you'd expect. I can temporarily fix it by calling wrap(1,2) instead of wrap(1,1) but it's super weird to me why this is happening.

I've attached a video to show the issue I'm facing 2021-06-23 16-09-44.mp4

Really? The demo doesn't work for me in both the Iframe and in codepen.. and I'm not seeing a scrollbar at the bottom. Really strange

Hey! Thanks for sharing this example. I'm currently trying to adapt it. I have noticed that on Chrome, scrolling to the right (scrollbar towards the bottom) will get stuck on the 0 card. This doesn't happen on FireFox. https://codepen.io/seanhuggins1/pen/bGqPxWq?editors=1111 Here's my modified example. I've added some console.log statements which fire when the carousel wraps right or left. You should be able to see that on Firefox, "wrap-left" and "wrap-right" are logged when you'd expect them to be, whereas on chrome, "wrap-left" AND "wrap-right" fire continuously when you attempt to scroll down. I think it has something to do with the onUpdate() method in the ScrollTrigger instance firing more than it should for Chrome browsers. Any thoughts on this? Weird that there seems to be a browser inconsistency. Thanks for your help.

Hey folks, this is an awesome solution, thank you!!! Final punch would be to make it wrap around infinitely, is this possible through looping timelines?

Is it possible to make dragging scrub a tween that affects an objects transform, rather than modify an objects transform directly? I'm asking about this because I'm trying to implement a wrapping, draggable, scrollable horizontal image carousel, like this one: https://prb-a.com/