Rolinda

Hi, Thank you for your response; things are starting to make more sense now. However, there's a slight issue with the simplest solution you proposed. It's not possible for me to wrap both my scroll section and the next section in a single div. The challenge stems from working with dynamically loadable components. On one page, the next section might be component X, while on another page, it could be component Y. Is there a way to resolve this without wrapping the scroll div with the next one, yet still avoiding excessive white space?

Hi, Thank you for your reply and examples! This helped me a bit (mostly the last example). But in this example the section is the height of the screen. My section has a fixed height of 540px. Now the bottom of the scrolled div looks weird, and also the last item is not shown fully. See my updated codepen (your results view needs to be bigger than the 540px or else you won't see my problem). Calculations aren't my strongest point haha, so I'm not sure which numbers I need to adjust.

Hello, I'm trying to do a vertical scroll Where the container is like for example 500px high. Inside this container I have multiple items. This container has an overflow hidden, so in the beginning you only see 1.5 item. When scrolling the page, when I reach the top of the container I want the page to stop scrolling, and start scrolling through the items in the container. When I reach the last item in the container, I want to page to start scrolling again. I tried multiple gsap to's but the main thing that I can't get to work is to stop the scrolling of the main page. Also, all the items that shouldn't be visible are appearing outside the container.