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! 1 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...
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