Gsap Toggle Class issue

[Adesh]

const pinLinks = gsap.utils.toArray('.pinScroll > div');
    pinLinks.forEach((pinLink, index) => {      
        const lastpinLinks = document.querySelector('.pinScroll > div:last-child');
        ScrollTrigger.create({
            trigger: pinLink,
            start: 'top center',
            end: () => `+=${pinLink.clientHeight}`,
            toggleActions: 'play reverse none reverse',
            toggleClass: { targets: pinLink, className: "active"},
        });
    });

 

The above code works fine for me to toggleClass based on scroll, but it removes the active class from the last child, which I don't want.

Can you please tell me how can is keep active class on last child?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Adesh]

See the Pen abjWGqo by Adesh-Evince (@Adesh-Evince) on CodePen

There you have it!

Essentially, my goal is to keep the last element active, whether scrolling down or up.

[GreenSock]

You mean you want it to ALWAYS be active? Then just put the active class on it and exclude it from your loop that's creating the ScrollTriggers, like this: 

See the Pen poZPVqG?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I commented out your Scrollbar custom code there because none of it was working and it was just breaking the ScrollTrigger functionality. 

 

I hope that helps.

[Adesh]

Not always present, When you scroll to the last box item, scrolltrigger adds an active class, but when you scroll litter more, it also removes the active class from the last, which I don't want to do.

[GreenSock]

You mean that it starts out without the active class, then ScrollTrigger adds it but once it's added, it NEVER gets removed no matter where the user scrolls? 

[Adesh]

No, not at all!

If the user scrolls from the top to the section, it will be active based on position, but once we reach the last box, it will stay active. If the user scrolls back from the bottom to the top, the active class will work again based on position and keep the first box active when the user is at the top of the page.

[Adesh]

Basically I need to keep 1box active no matter where the user scrolls.

1) if user above the section then first box will be active.

2) if user below the section then last box will be active.

 

Did you got it?

[GreenSock]

Then you'll need to write custom logic for that. You could do it in an onToggle:

See the Pen RwBVJJB?editors=0010 by GreenSock (@GreenSock) on CodePen

[Adesh]

Yes, that's exactly what I'm looking for.😊
Thank you very much for your prompt response.

[GreenSock]

Happy to help! Enjoy the tools. 

[Adesh]

Hello

 

I'm trying to use this active toggle class on multiple sections with a foreach loop, but it's not working. Could you please investigate the problem?

 

See the Pen VwBzxMo by Adesh-Evince (@Adesh-Evince) on CodePen

[Rodrigo]

Hi,

 

The difference is that now you have multiple wrappers with a right section and boxes inside that one. All you have to do is loop through each of those wrappers, get the boxes for each wrapper and run the same loop Jack created in his answer.

 

Here is a fork of your last codepen:

See the Pen xxJPoyg by GreenSock (@GreenSock) on CodePen

 

Hopefully this clears things up. Let us know if you have more questions.

 

Happy Tweening!

[Adesh]

Hello,

 

I tried as you suggested, but I only get the first and last child of each section, and adding and removing classes no longer works.

 

Please check below code pen.

See the Pen dyjJGVj by Adesh-Evince (@Adesh-Evince) on CodePen

 

[Rodrigo]

Hi,

 

You have to nest the loops. Take a good look at your code and the code from my example:

wrappers.forEach((wrapper) => {
  const q = gsap.utils.selector(wrapper);
  const pinobject = wrapper.querySelector(".left");
  const pinScroll = wrapper.querySelector(".right");
  ScrollTrigger.create({
    trigger: wrapper,
    pin: pinobject,
    pinType: "transform",
    start: "top top",
    end: () => `+=${pinScroll.clientHeight - pinobject.clientHeight}`,
    pinSpacing: false,
    scrub: true
  });

  const pinLinks = q(".right .box");
  pinLinks.forEach((pinLink, index) => {
    let isLast = pinLinks === index.length - 1,
      isFirst = pinLinks === 0;
    ScrollTrigger.create({
      trigger: pinLink,
      start: "top center",
      end: () => `+=${pinLink.clientHeight}`,
      onToggle: (self) => {
        if (self.isActive) {
          pinLink.classList.add("active");
        } else if (
          !(isFirst || isLast) ||
          (isFirst && self.progress > 0) ||
          (isLast && self.progress < 1)
        ) {
          pinLink.classList.remove("active");
        }
      }
    });
  });
});

I'm creating a loop for all the wrappers. For each wrapper I get the right side boxes and loop through those. This is not a GSAP related issue but a JS/logic handle one. I recommend you to take a pause and think about how the code I posted above works and see how the elements are selected. As you can see in the codepen example is working as expected.

 

Happy Tweening!