nyldev

@Rodrigo Completely understand not being able to dive into the specifics for this complex problem. I more than appreciate your efforts to point me in the right direction and proposing a different strategy. I'll look into your suggestion and take your notes into account. Once again - thanks so much!

Thanks for your response and the resources @Rodrigo. I've switched to useGSAP and tried to implement some changes based on the docs and links you provided but I'm still having trouble emulating a left justified pin. Please see the codepen below to my new attempt. https://codesandbox.io/p/sandbox/scroll-section-with-fake-pins-vglmmt I've gotten the horizontal scroll to engage and correctly scroll through the sections and then ending the trigger to move onto the rest of the web page - but I am having trouble pinning the coffee cup. Preferably as we scroll through the horizontal scroll, the cards should scroll from right to left and out of view but the coffee cup should scroll up to the point where it's next to the laptop and stay in place. Is the way I have the useGSAP set up for the coffeeContainer not the correct strategy?

@akapowl Thanks for your solution from December 13, 2020. I'm trying to do something similar where my application scrolls down to a section with the horizontal scroll. For my react / next.js application, and much like your solution, I am trying to have all my sections scroll horizontally to the left, pin, and overlap each other. Once I scroll through the sections then the container's horizontal scroll should disengage and move vertically down to the rest of the web page. My problem is that when I engage in the first scroll, it somehow makes the container disappear and does not allow for the subsequent thumbnails to stick. What's an even stranger effect, the horizontal scroll does appear but only in reverse after I scroll to the bottom of the page first. Since I am using next.js I am utilizing useRefs instead of query selectors. Could this be a reason my app is experiencing this odd behavior? Here's my sandbox attempt: https://codesandbox.io/p/sandbox/horizontal-scroll-with-left-sticking-panels-6yg39f?file=%2Fsrc%2FStickyScroll.jsx%3A7%2C29

https://codesandbox.io/p/sandbox/horizontal-scroll-with-left-sticking-panels-6yg39f?file=%2Fsrc%2FStickyScroll.jsx%3A7%2C29 Not sure why codepen won't load but here is the link for reference. Would appreciate any advice!

Hi community, Hoping someone can help with this issue - I have a single page application that goes into a section that I would like to enable horizontal scroll for. Within that horizontal scroll are sections that I would like scroll through horizontally but instead of having the sections scroll out of view I would like for them to stop on the left of the screen and overlap each other. I was able to work the horizontal scroll but can't get the sections to stick to the left. When I try to add a second scroll trigger for each panel to stop on the left side of the window, the first scroll doesn't behave as expected and makes the panel disappear when the first scroll is started.