dotun12 Posted September 11, 2020 Share Posted September 11, 2020 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 More sharing options...
ZachSaucier Posted September 11, 2020 Share Posted September 11, 2020 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 More sharing options...
dotun12 Posted September 11, 2020 Author Share Posted September 11, 2020 thanks zachsaucier, I have made the change to ScrollTrigger.create but still did not work. Link to comment Share on other sites More sharing options...
Dipscom Posted September 11, 2020 Share Posted September 11, 2020 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. 1 Link to comment Share on other sites More sharing options...
dotun12 Posted September 11, 2020 Author Share Posted September 11, 2020 Dipscom, I have done that but still did not work. Link to comment Share on other sites More sharing options...
Dipscom Posted September 11, 2020 Share Posted September 11, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
Dipscom Posted September 11, 2020 Share Posted September 11, 2020 I forgot to mention: have a look at the ScrollTrigger page it has detailed information about all the things it does. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now