Rolinda Posted March 14 Share Posted March 14 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted March 14 Share Posted March 14 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! Link to comment Share on other sites More sharing options...
Rolinda Posted March 19 Author Share Posted March 19 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 19 Share Posted March 19 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! Link to comment Share on other sites More sharing options...
Rolinda Posted March 20 Author Share Posted March 20 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted March 20 Share Posted March 20 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now