Vertical scroll

[Rolinda]

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.

See the Pen poBEwbe?editors=1111 by Rollietjess (@Rollietjess) on CodePen

[Rodrigo]

Hi @Rolinda and welcome to the GSAP Forums!

 

This is about the calculations and moving the elements on the Y axis while pinning their parent container as shown in these demos:

See the Pen KKeJaqW by GreenSock (@GreenSock) on CodePen

 

See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Rolinda]

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.

[Rodrigo]

Hi,

 

That's to be expected, in order for pinning to work that some spacing has to be created which is the one you're referring to. The simplest solution is to wrap the section you want to pin and the next one with a common parent and pin that particular element.

 

Here is a fork of your demo:

See the Pen dyLNqPr by GreenSock (@GreenSock) on CodePen

 

Here are other demos that use the same approach:

See the Pen LYMYYEL by GreenSock (@GreenSock) on CodePen

 

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen

 

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[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?

 

[Rodrigo]

Yeah that makes matters a bit more difficult for sure. Unfortunately because of the way pinning works there are not a lot of options here.

 

The only solution I can think of is to pin both sections at the same time using different ScrollTriggers:

See the Pen ZEZeLmL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!