Change menu change onscroll with scroll trigger

[dotun12]

Hi there

 

I am trying to change the color of the menu, once I scroll to the a section, i try to toggle the class but did not work.

 

secondly, I want to also scale the border line only in the menu on mouse, not together with the text, the text(menu) should not scale only the border line.

 

thanks

See the Pen VwaxmaB by onseyi (@onseyi) on CodePen

[ZachSaucier]

1 hour ago, dotun12 said:

I am trying to change the color of the menu, once I scroll to the a section, i try to toggle the class but did not work.

If you look in your dev tools console (F12) you will see the issue: scrollTrigger is not defined. Your syntax is incorrect - it should be ScrollTriger.create(). You're also making one of the most common ScrollTrigger mistakes - loading a library called "ScrollTrigger" that's not GSAP's ScrollTrigger. Load GSAP's ScrollTrigger  

 

1 hour ago, dotun12 said:

I want to also scale the border line only in the menu on mouse, not together with the text, the text(menu) should not scale only the border line.

You can't just scale the border of an element and not the rest of the element. What you should do instead is create an element just for the border. Then scale that element instead of the whole button. I also recommend that you set up your animations beforehand and just use control methods inside of your event listeners. I talk more about that in my article on animating efficiently, which I highly recommend.

[dotun12]

thanks zachsaucier, I have made the change to ScrollTrigger.create but still did not work.

[Dipscom]

Hi @dotun12 it's because you're still loading the wrong ScrollTrigger library. Check out the link that Zach posted to the most common ScrollTrigger mistakes for further details.

[dotun12]

Dipscom, I have done that but still did not work.

[Dipscom]

Indeed you have now.

 

The class is not toggling because you're not targeting the correct element. As you have it, it's adding the class to the trigger element ".sec1".

 

ScrollTrigger.create({
  trigger: ".sec1",
  markers: true,
  start: "top top",
  end: "top top",
  toggleClass: "menu_black"
});

You want to define a target and add the className to it.

 

ScrollTrigger.create({
  trigger: ".sec1",
  markers: true,
  start: "top top",
  toggleClass: {targets: ".ham", className: "menu_black"}
});

Also, you will want to remove the "end" property from your ScrollTrigger.create() call. Otherwise, it won't work as well because it will add and remove the new call at the same time if your starting point and ending point are exactly the same.

[Dipscom]

I forgot to mention: have a look at the ScrollTrigger page it has detailed information about  all the things it does.