benoit958 Posted September 4, 2023 Share Posted September 4, 2023 Hello, I'm having trouble using scrolltrigger multiple pinned sections. I'd like to have multiple pinned sections where a carousel is “activated” once user’s scroll reached the center of the element. As it's important that rest of the content stays visible when a section is pinned, I'm using the “main” element as pin value. My problem is that the start position of the second section is messed up by the previous one. Hope it's clear.. It's certainly not the right method so if someone could help understand how to approach I'd be grateful See the Pen dywpqZo by benoitbohnke (@benoitbohnke) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 4, 2023 Share Posted September 4, 2023 Hi, Maybe something like this: See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen In this cases the best approach is to wrap everything in the same parent, pin that element and use the previous method in order to get the previous ScrollTrigger instance's end point. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
benoit958 Posted September 6, 2023 Author Share Posted September 6, 2023 Thanks Rodrigo, It definitly helps but I'm still confused on how I should calculate that start position. In my case I have other regular sections in between and I want different animation to happen for each section. I thought I could simply add section.offsetTop to self.previous().end but it only works for the second section (after hero in my example). I expected the animation to start when third section reaches the top of the window too. Link to comment Share on other sites More sharing options...
Rodrigo Posted September 6, 2023 Share Posted September 6, 2023 Hi, Every scenario is different and that's why adding ID and indent the markers is always a good idea. In this case the challenge was to determinate when the top of each element will get to the top of the viewport. By default without any pinning ScrollTrigger will calculate that scroll amount based on the position of each element. Since you are pinning the parent of every element, you have to add that scroll amount to your start point: let accumulatedOffset = 0; gsap.to(hero, { scale: 0.9, duration: 2, scrollTrigger: { trigger: hero, start: "top top", // or 'top 25%' end: "+=300", pin: parent, markers: true, scrub: 1 } }); // Add the pin space from the previous // ScrollTrigger instance accumulatedOffset += 300; gsap.to(cards1, { scrollLeft: 1000, scrollTrigger: { trigger: cardsCtn1, start: "top+=" + accumulatedOffset + " top", end: "+=500", pin: parent, markers: { indent: 150 }, id: "one", scrub: 1 } }); // Add the pin space from the previous // ScrollTrigger instance accumulatedOffset += 500; gsap.to(cards2, { scrollLeft: 1000, scrollTrigger: { trigger: cardsCtn2, start: "top+=" + accumulatedOffset + " top", end: "+=500", pin: parent, markers: { indent: 350 }, id: "two", scrub: 1 } }); That seems to work the way you intend: See the Pen eYbBXbR by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
benoit958 Posted September 6, 2023 Author Share Posted September 6, 2023 Perfect, thanks a lot ! Link to comment Share on other sites More sharing options...
m__shum Posted May 24 Share Posted May 24 On 9/6/2023 at 9:41 AM, Rodrigo said: Hi, Every scenario is different and that's why adding ID and indent the markers is always a good idea. In this case the challenge was to determinate when the top of each element will get to the top of the viewport. By default without any pinning ScrollTrigger will calculate that scroll amount based on the position of each element. Since you are pinning the parent of every element, you have to add that scroll amount to your start point: let accumulatedOffset = 0; gsap.to(hero, { scale: 0.9, duration: 2, scrollTrigger: { trigger: hero, start: "top top", // or 'top 25%' end: "+=300", pin: parent, markers: true, scrub: 1 } }); // Add the pin space from the previous // ScrollTrigger instance accumulatedOffset += 300; gsap.to(cards1, { scrollLeft: 1000, scrollTrigger: { trigger: cardsCtn1, start: "top+=" + accumulatedOffset + " top", end: "+=500", pin: parent, markers: { indent: 150 }, id: "one", scrub: 1 } }); // Add the pin space from the previous // ScrollTrigger instance accumulatedOffset += 500; gsap.to(cards2, { scrollLeft: 1000, scrollTrigger: { trigger: cardsCtn2, start: "top+=" + accumulatedOffset + " top", end: "+=500", pin: parent, markers: { indent: 350 }, id: "two", scrub: 1 } }); That seems to work the way you intend: Hopefully this helps. Happy Tweening! Hey Rodrigo – how would you handle resizing in this case? I'm having a very similar issue (two elements, both get pinned, both have different parents). I've been spinning my wheels trying to figure out how to handle this when the right side scrolls, but elements of the left side stay pinned, AND the section with the info is always initially in line with the beginning of the gallery to its right so I can't just have two containers, flex 'em, and leave it at that, because I'd need to update the offset under the title on resize. Link to comment Share on other sites More sharing options...
Rodrigo Posted May 24 Share Posted May 24 Hi @m__shum, It seems that your setup is quite different than the one from the OP. On top of that without a minimal demo there is not a lot we can do to help. Maybe you could borrow some logic from these demos in order to achieve what you're aiming for (I recommend you to view them in a new tab): See the Pen rNbELKO by GreenSock (@GreenSock) on CodePen See the Pen abrZQJO by GreenSock (@GreenSock) on CodePen See the Pen eYQYxJW by GreenSock (@GreenSock) on CodePen See the Pen wvYVjvb 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