Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dotun12

Change menu change onscroll with scroll trigger

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 1
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.
×