Jump to content

Mustafa Şatıroğlu

Add Class or Remove Class menu navigation elements on Horizontal Scroll

Recommended Posts

Hello everyone. I'm just learning gsap. It's really fun :)


I have a problem. I am trying to add and remove classes in navigation menu items in scroll state.


I want the active class to be added to the menu items that are above the scroll, and to remove the active class from the menu items unless there is a scroll.


So let me give an example. Let's say the user went to Section 3. In this case, the active class will be added to the first 3 of the above menu items. In this case, let's say it went to section 2 by scrolling. This time, the active class will be added to the first 2 of the above menu items.

I hope I was able to explain. I tried a lot, but I'm very new to gsap and couldn't do it.



See the Pen LYdwmQq by mustafasatiroglu (@mustafasatiroglu) on CodePen

Link to comment
Share on other sites



You can use the onEnter and onEnterBack callbacks from ScrollTrigger to set/unset the active class on the links elements. Check this codepen to see how it works:


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


Happy Tweening!!!

  • Like 4
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.