vaviriot Posted June 6, 2023 Share Posted June 6, 2023 Hi, everybody! I have a problem, with panels, when I clicking, on single nav sequentially it works fine, if I try non-sequentially it always leads me to wrong panel, Can you help me? Thank u so much. See the Pen xxQKovE by VaviRiot (@VaviRiot) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 6, 2023 Share Posted June 6, 2023 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You'll definitely have a MUCH better chance of getting a good answer if you greatly simplify your demo. There's around 1200 lines of JS/CSS/HTML in there 😯 It certainly looks to me like it's logic-related somewhere in your code, not GSAP-related. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a simplified minimal demo and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
Cassie Posted June 6, 2023 Share Posted June 6, 2023 Hi there @vaviriot - did you mean to link to an empty codepen? Link to comment Share on other sites More sharing options...
vaviriot Posted June 6, 2023 Author Share Posted June 6, 2023 Hi, i'm sorry, this is codepen . Thank u Link to comment Share on other sites More sharing options...
Cassie Posted June 6, 2023 Share Posted June 6, 2023 Heya, thanks for the demo! There's a lot here though - Would you mind cleaning it up a bit and making it clear which numbers the panels are - no need for styling and content like you have currently. As you're having problems with the panel logic please just include the panels along with some simple labelling. Just colored rectangles with a big ONE TWO THREE on them, and some links with a bit ONE TWO THREE etc would be great. We don't need to see your content or any animations that aren't related. Help us to help you - Thanks! Link to comment Share on other sites More sharing options...
vaviriot Posted June 6, 2023 Author Share Posted June 6, 2023 @Cassie thank u so much, i clean my code, this is the codepen: Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted June 6, 2023 Solution Share Posted June 6, 2023 Hi, The problem is in the logic you're using for moving the panels when you click on the element and which panels you're selecting. Right now you're just selecting one, you have to create subsets of the panels array and animate all of them. I don't have time to go through all the logic you have in your method so I came up with this instead: navList.forEach((anchor, i) => { anchor.addEventListener("click", function (e) { e.preventDefault(); preventScroll.disable(); intentObserver.disable(); if (preventScroll.isEnabled === false && !animating) { if (i > currentIndex) { gsap.to(swipePanels.slice(0, i + 1), { xPercent: 0 }); } else if (swipePanels[i + 1]) { gsap.to(swipePanels.slice(i + 1), { xPercent: 100 }); } currentIndex = i; // tween.scroll(tween.start); // if (i >= currentIndex) { // gotoPanel(i, true, true); // } else { // gotoPanel(i, false, true); // } } }); }); You can learn more about the slice method here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice Here is a fork of your codepen that does just that: See the Pen bGQGRNR by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
vaviriot Posted June 7, 2023 Author Share Posted June 7, 2023 @Rodrigo Thank so much, i have another question please, How can I avoid when scrolling hard, the glitch on top the panel ? This happens between the first container and the first panel Thank u! Link to comment Share on other sites More sharing options...
Rodrigo Posted June 7, 2023 Share Posted June 7, 2023 Hi, You can try with anticipatePin which is a number not a boolean. From the ScrollTrigger docs: Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0). crollTrigger.create({ trigger: ".swipe-section", pin: true, anticipatePin: 1, start: "top top", end: "+=50%", }); But this kind of behaviour kind of comes with the territory. There is always a possibility that a user scrolls a bit too hard and is going to take a few ms for the code to catch up with the scroll position, it's just the nature of the whole pinning stuff. 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