Jump to content
Search Community

Switch classes of links when scroll the page

GwSr test
Moderator Tag

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

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

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

  • 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

  • 10 months later...

Thanks, that's exactly what I'm looking for (what I'm feeding into the tween, specifically what scrollTo target value is expected) but my code doesn't have asections array like the above example, so I'll have to figure out something else.


I just have gsap.to(window, {duration: 1, scrollTo:"article class" + (index + 1)}); and then in the HTML a series of articles with incremented classes, like "article class1, article class2", etc. My classes are there in the HTML. Maybe I wrote that scrollTo value in a non-working way.


I'll see what I can do about a demo.

 

 

Edited by David Rhoden
marking code stuff as code
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.
×
×
  • Create New...