nami

Hey y'all, I have a tricky question: I have a set of columns with images that are scrollable. the parent element is set to a height of 100vh and an overflow of hidden as you can see in the code pen provided. What i want: when I scroll on the page, i want each div to scroll and every nth column to reverse scroll. Would be nice if i didn't need to set the overflow to auto of the columns so i won't see the sidebars of each column, but that's a bit of an extra. The effect I am trying to get is similar to what you see in a jackpot machine, but instead of pressing a button, you use a scroll event. Thanks in advance for the help/tips

https://codepen.io/imane-ben/pen/MWJqEeo So many things are wrong now, I have tried your solution and i guess it works, but between every panel, some weird spacing gets added ( between the end of one panel and the start of the other). Not sure what is causing it. Also, how do i slow down the scrolling on the horizontal scroll so the last and first panel can stay a bit on the view port? I have tried the duration attribute and setting the scrubbing to 5 for instance but it didn't seem to do much. Many thanks.

Hey! So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker gets past the center. My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets past it? I hope my question was clear

That does it! i thought the setting the pinSpacer to false would do the job, but this will do just fine! Thank your for the help

Thanks! You solved problem 1 for me, I guess the proxy class should be replaced by .panel2 as well? While it seems to be working fine on my laptop, when i check it on my phone it doesn't scroll horizontally. This happens when i use the code outside the code pen it creates this overflow-x even though i set the overflow to be hidden on the body.

dear greensock, I am making this post in the hopes that someone can help me with this issue. seems absurd that i am making a post since I have been seeing this effect everywhere, but I cant' seem to make it work on my code. Im tried to reproduce the error inside a codepen I hope that helps So basically there are two things that i am missing: One: once the horizontal scroll is over, I want it to continue to vertically scroll through the rest ( the third panel, which is exactly like the first panel). What happens now is that even though the horizontal wrapper is pinned, it continues to scroll through the third panel and it kind of disappears Two: The horizontal scrolling doesn't seem to be working on a mobile device. Here is a link of a very good example of what I am trying to achieve: https://garoaskincare.com/ It is my first go at gsap so bare with me