Jump to content
Search Community

Switch classes of links when scroll the page

GwSr
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Posted

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
Posted

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
Posted

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!

Posted

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? 

Posted

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.

  • Solution
Posted

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
Posted

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
  • 10 months later...
Posted

If you wanted to console.log the scrollTo target, how would you do it?

I'm getting this error, but I'm pretty sure the target _does_ exist. I want to see what gsap _thinks_ the scrollTo target is.

Posted

I'm not sure I understand what you mean, @David Rhoden - you just want to know what you're feeding into the tween? Wouldn't it just be: 

console.log(sections[index])

right above where your tween is? 

 

If you still need help, please make sure you include a minimal demo that clearly illustrates the issue. ?

Posted (edited)

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
Posted

Then right above that line, you could do: 

console.log(document.querySelector("article class" + (index + 1)));

 

  • Like 1
Posted

Got back null. I'm writing that selector wrong.  
(Thanks for answering my question, very helpful.)

 

But also: I tried just hard-coding a selector that I know exists (article class5) and still got scrollTo target doesn't exist. Does scrollTo maybe only work with an ID?

Posted

No, it doesn't only work with an ID. You can pass in a number (absolute scroll value) or selector text or an element. It sounds like you must be using the wrong selector text. Didn't you forget the "." before the class name? "article .class5"? 

  • Like 1
Posted

Ah....you found me out. It needs to be article.class5 (no space), AND I also had to put class="class5" in the HTML...thanks. You've been very helpful. It's working now.

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...