GiGiX Posted October 12, 2021 Share Posted October 12, 2021 Hello, GSAP is a great tool, and I'm sure I missed something important and that's why I'm facing with this issue. I rewrote it few times, because I thought there's a typo, but I'm sure it's a programming issue. I used ScrollTrigger only for very basic animations, forgive me for my rookie mistakes. After few slides, I would like scroll horizontally, that's where I have the issue what I mentioned in the title. It looks like because of the animations on the first few slides, the horizontal scroll part thinks that the user reached the target. - If that's the issue, then what's the best practice to solve it? The users needs to wait to much between the sections, for that reason I would like to speedup the swap between the vertical scroll sections. For this I tried to use durationbut it doesn't have any effect. Is it possible to do it? Thank you! See the Pen abyOvLR by rryp111 (@rryp111) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 13, 2021 Solution Share Posted October 13, 2021 Welcome to the forums, @GiGiX! Nah, it's not a rookie mistake - you've got a tricky scenario there. But don't worry, it's totally solvable. The problem is that you were pinning an element inside another element that's also pinned. That's not a good recipe for success Just pin the outer element in both scenarios. You can even make the horizontal one pick up exactly where the previous ScrollTrigger picks up by using a function-based end value of self => self.previous().end See the Pen rNzVWjL?editors=0010 by GreenSock (@GreenSock) on CodePen Is that more like what you wanted? 2 1 Link to comment Share on other sites More sharing options...
GiGiX Posted October 13, 2021 Author Share Posted October 13, 2021 I see! Thank you, that's great! 1 Link to comment Share on other sites More sharing options...
GiGiX Posted October 13, 2021 Author Share Posted October 13, 2021 If I would like to add more sections below the horizontal part, then should I create a new animation, or can I use it with the existing code? What's the best practice? Probably it's not a good solution to duplicate the code with different classes. let sectionsArr = gsap.utils.toArray(".panel-vertical"); sectionsArr.forEach((element) => { gsap.from(element, { autoAlpha: 0, ease: "power2", scrollTrigger: { trigger: element, scrub: true, pin: true, start: "top top", end: "+=100%" } }); }); Just to test it I added 2 more sections below, and it broke the layout: See the Pen eYENyzb by rryp111 (@rryp111) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 13, 2021 Share Posted October 13, 2021 Jack will likely have a better solution, but I tend to be very much on the 'if it works it works' camp. The order of the scrollTriggers is very important as the second vertical section needs to base it's trigger positions based on the horizontal section. If that scrollTrigger hasn't been created yet the positioning is going to be off. Maybe there's a better way to do this but one extra repeated scrollTrigger isn't going to be the end of the world. See the Pen bGrdxLv?editors=1010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 13, 2021 Share Posted October 13, 2021 Yep, as @Cassie said it's critically important that you create ScrollTriggers in the order they occur on the page because the ones further up may push the lower ones down (thus affecting their start/end scroll positions). If you must create them out of order, you can set a refreshPriority on each but in your example I'd just do it like this: See the Pen BadNbmj?editors=0010 by GreenSock (@GreenSock) on CodePen In your first loop, just check to see if the section has the ".panels-horizontal" class and if so, initialize it at that point so that things are all created in the proper order. Does that clear things up? 2 Link to comment Share on other sites More sharing options...
Cassie Posted October 13, 2021 Share Posted October 13, 2021 clever! 1 Link to comment Share on other sites More sharing options...
GiGiX Posted October 13, 2021 Author Share Posted October 13, 2021 Wow! It's really easy to understand the functionality with these examples. Thank you guys! 2 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