Navigation links active in horizontal scroll - ScrollTrigger

[dev33]

I need the menu to be active after scrolling; now it only works when you do a click, thanks

See the Pen GRwKQzj by dev33-developer33 (@dev33-developer33) on CodePen

[dev33]

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

 - for example it works but when the sections are vertical and I need it horizontally

[Cassie]

Hey there!

 

Check out containerAnimation - it's an easy way to fire off logic or animations in horizontally scrolling sections

 

https://greensock.com/3-8/#containerAnimation

 

Hope this helps.

[dev33]

thank you, but it is not help me

[Cassie]

if you explain what you tried and why it doesn't help then we can help you

[dev33]

I want the active menu to change after horizontal scrolling

[Cassie]

Sure, you can do that using the technique I linked to - It allows you to fire off callbacks on a horizontal section. 

See the Pen PoxoZYa?editors=1011 by GreenSock (@GreenSock) on CodePen

[dev33]

but it doesn't work right, and as I see it is necessary to add for all sections and I need it to be dynamic

[Cassie]

Well no, it doesn't work entirely, It's not a full solution, It's a little breakdown of how that feature works and a bit of guidance into how you can acheive your goal.
 

Quote

I see it is necessary to add for all sections and I need it to be dynamic

You can loop round sections dynamically. You'd just need to write out a loop and grab information about the sections within that.

If you need any more help please show what you've tried.

[dev33]

const navbarLinks = document.querySelectorAll(".navbar a");

 

      function setActive(link) {

        navbarLinks.forEach(el => el.classList.remove("active"));

        link.classList.add("active");

      }

 

        navbarLinks.forEach(a => {

        let element = document.querySelector(a.getAttribute("href"));

            ScrollTrigger.create({

                trigger: element,

                start: "top top",

                end: "top bottom",

                onToggle: self => self.isActive && setActive(a)

            });

        });

[dev33]

Just now, dev33 said:

const navbarLinks = document.querySelectorAll(".navbar a");

 

      function setActive(link) {

        navbarLinks.forEach(el => el.classList.remove("active"));

        link.classList.add("active");

      }

 

        navbarLinks.forEach(a => {

        let element = document.querySelector(a.getAttribute("href"));

            ScrollTrigger.create({

                trigger: element,

                start: "top top",

                end: "top bottom",

                onToggle: self => self.isActive && setActive(a)

            });

        });

I tried this but it doesn't work, something is missing

[Rodrigo]

Hi,

 

A few lines of code doesn't tell us exactly what could be wrong, but keep in mind that the setActive method you created is going to run twice. One for the ScrollTrigger instance leaving and another for the one entering.

 

Maybe this could be better:

elements.forEach((el) => {
  gsap.to(el, {
    scrollTrigger: {
      start: "top top",
      end: "bottom top",
      onToggle: () => el.classList.toggle("active"),
    },
  });
});

But again, without a minimal demo there is not much we can do.

 

Hopefully this helps.

Happy Tweening!

[dev33]

no, that didn't help either.

[dev33]

I need something to connect the navbar and sections

[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. 

[Cassie]

This is a little frustrating because I gave you the necessary information already.

I explained that containerAnimation allows you to fire off callbacks in a horizontal scrolling section.
I linked to the an article with demos, an explainer and a video demonstration.
I wrote you a small demo
And when you said that didn't work I mentioned that you could loop around dynamically and that it was just a guide and not a full solution.

Either way - here's a fully fleshed out solution. Please in future try to read the information and attempt it yourself, we're always happy to answer questions about it if you read through and something doesn't make sense.

If you're really stuck and need someone to write out a full solution or talk it through step by step with you, that's ok - we all get stuck, but maybe ask nicely? We're people, not robots. Just saying "but it doesn't work right" without any explanation, ignoring the advice given, posting screenshots of code without any explanation and repeating the title of the thread isn't really inspiring people to help. It all felt a bit demoralising to be honest. 

 

See the Pen PoxoZYa?editors=0011 by GreenSock (@GreenSock) on CodePen

I really hope this helps, but if you need more help, please try to be give us a bit more information and be less abrupt. Thanks.

[dev33]

thank you very much, it helped me a lot, it disappeared only after clicking on the partition transfer, but I already did it, thanks again, this is a very good job

[dev33]

The final view

[Cassie]

That looks great, glad we got there in the end!