Samuele Posted May 26, 2022 Share Posted May 26, 2022 Hi all! I'm having some issue to figured out what is not working with "onEnterBack:()" I have a simple sticky nav that every time sections appear on scroll a class is added to the nav item associated. const panels = gsap.utils.toArray(".panel"); const navLinks = gsap.utils.toArray(".sticky-infos div"); panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top 15%", onEnter: () => { navLinks.forEach((e) => { e.classList.remove("active"); }); navLinks[i].classList.add("active"); }, onEnterBack: () => { navLinks.forEach((e) => { e.classList.remove("active"); }); navLinks[i].classList.add("active"); }, }); }); Actually it works pretty good but something "onEnterBack" doesn't work properly (class "active" is not added). Should I use other parameters? 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 26, 2022 Share Posted May 26, 2022 It should fire everytime! Could you pop together a minimal demo for us so we can take a look? Link to comment Share on other sites More sharing options...
GreenSock Posted May 26, 2022 Share Posted May 26, 2022 I bet you meant onLeaveBack instead of onEnterBack. Remember, the onEnterBack would only fire if you scroll PAST the "end" and then backwards up again beyond that point. Link to comment Share on other sites More sharing options...
Samuele Posted May 27, 2022 Author Share Posted May 27, 2022 I looked at this Codepen, but in my case navbar is sticky lateral: See the Pen gOmRyRP by gregOnCodePen (@gregOnCodePen) on CodePen "onEnterBack" is actually what I really need to add the class "active" once the user go beyond and forward that point... Let me know if you need a codepen more structured from me. Link to comment Share on other sites More sharing options...
Samuele Posted May 27, 2022 Author Share Posted May 27, 2022 Here's my poor Codepen BTW: See the Pen MWQvxmq by sml-k (@sml-k) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 27, 2022 Share Posted May 27, 2022 54 minutes ago, Samuele said: "onEnterBack" is actually what I really need to add the class "active" once the user go beyond and forward that point... So does this mean you solved the issue? I read your posts a few times and it wasn't clear to me if you were asking for more help about something. If so, please elaborate on your question and we'll do our best to help. Link to comment Share on other sites More sharing options...
Samuele Posted May 27, 2022 Author Share Posted May 27, 2022 Nope, I was just replying to "onLeaveBack"... As you can see on my codepen there's a strange behavior with "onEnterBack" . Once I slightly scroll up back to "section 2" or "section 1" the class "active" is not added to nav item. I scroll up to section 2 but still "wine" has active class, i'm expecting active class to "Lunch". This happens when you scroll slightly near to the section edges. Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 27, 2022 Solution Share Posted May 27, 2022 Well there's a gap between your scroller trigger points so you're effectively creating a bit of a dead zone in your logic. This is maybe more what you're after? See the Pen jOZYYvv?editors=0011 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Samuele Posted May 27, 2022 Author Share Posted May 27, 2022 @Cassie thank you! So in that case I missed to set "end" equal to "start"... sounds too obvious now! Have a nice day! 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 27, 2022 Share Posted May 27, 2022 Glad to have been able to help! You have a nice day too pal. 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