Jump to content
Search Community

Function onEnterBack

Samuele test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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? 

  • Like 1
Link to comment
Share on other sites

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

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.

1003059420_Schermata2022-05-27alle10_37_12.png.b9a4b0e3b33bd2149e06c35e83dad448.png

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...