Jump to content
GreenSock

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

Switch classes of links when scroll the page

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone!

Here's my another problem which I can't solved or misunderstanding.

I want to make my custom links (without anchors) toggle "active" class itself when I scroll the webpage between sections. In the old code I've included in the demo works when I resize the dimension of browser. I don't know why it happens🤷‍♂️.

 

Based on these examples I've just copy/paste the code hopping that would work but without results.

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

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

Maybe I miss something or my function which scroll to the specific section could harm the idea? Down is my codepen example 

See the Pen KKvvMvz by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

Link to comment
Share on other sites

Hey again!

 

It's always good to check the console when debugging.

In your case - the scrollTo target doesn't exist - you haven't got an ID of #section-(number) to jump to.

 

It's also a little hard to debug because you have a lot going on - If you need more help with the nav it would be great if you could pull that out into it's own pen so it's easier for us to assist you with!

 

 

 

Screenshot 2021-10-29 at 10.06.24.png

  • Like 1
Link to comment
Share on other sites

Sorry @Cassie for my demo's complexity.

I've changed the code and styling so you can easy to see what's happening there.

See the Pen KKvvMvz by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

Could you explain me why we use ScrollTrigger.create at line 28?

And why my old code (after line 47) works almost fine instead I must to change the browser resolution to make it work?

 

And thank you for respond!

Link to comment
Share on other sites

You've got scroll-behavior: smooth in your CSS which breaks things because when GSAP tries to scrollTo, the browser is like "NOPE! I'm not gonna let that happen - I'll slow it all down and force things to work a different way" and then when GSAP updates on the next tick it's like "oh, something else changes the scroll position from what I set it to last, so I better release control of it so the user can do what they want." 

 

I don't understand your question about ScrollTrigger.create() - can you elaborate? 

 

Once I fixed your CSS, it seemed to work the way I expected. Is something broken for you? 

Link to comment
Share on other sites

Actually yes. When I scroll to each section it doesn’t switch links that show us where section we are.

I’ve copied the code from “solved” example but it doesn’t execute.

Link to comment
Share on other sites

  • Solution

Oh, I didn't realize that's what you were going for. Yeah, you didn't set the "scroller" property on the ScrollTrigger (it defaults to the body/window but you're actually scrolling the #main element). You also had the start/end incorrect. I'd probably just use an onToggle like this: 

See the Pen ZEJJVvR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Wow, That's awesome! Thank you for help))))

I little bit modified the code

onToggle: self => {
            if (self.isActive) {
                links[i].classList.add("active");
            } else {
                links[i].classList.remove("active");
            }
        }

 

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