Gsap Section Anchor

[Sukru]

Hello, in a project I am working on, I want to make the menu go to different places on the page, I created codes for this, but when I go to the point I want to go with "anchor", I also wanted to know where I was in the menu I fixed. However, I think it assumes the points that I didn't add #anchor and it seems as if the hug is surprised. When I click on an item, a very unrelated item "active" class is added. Can you help with the codepen link i created?

 

See the Pen PoxGOEB by sukruemanet (@sukruemanet) on CodePen

[akapowl]

 

Hello Sukru,

 

you are having a logic problem that you will need to find a way around.

You have 12 sections with the first three not being supposed to have a relation to a link on your menu - but you are creating references to the STs of the links forEach of your sections via the index of the section - which is why your links' STs won't match up with the sections. And it also creates errors btw, because at some point there is no more link that could be refferenced because of the difference in indexes available.

 

The easiest way around this that comes to my mind, is to create an array of just the sections that you want to trigger things on; you could distinguish them fron your 'empty' sections by e.g. adding a specific class and then itterate over only those.

That should give you a good starting point in a direction that works more like you had in mind.

 

[Sukru]

@akapowl hi thank you, I tried this, I continued by choosing the class with ".section" only, but the first "empty" button takes the active class, actually it should not. The complexity continues. I can't figure it out. Any chance you could help with my codepen example?

[akapowl]

Sorry, but I don't see any of what you have tried with regard to what I mentioned above reflected in your codepen demo.

 

If you specifically want help with your usecase, please include another demo of what you tried yourself, so we can point you to what might be off in your case more easily. Of course, anybody is welcome to provide a solution if they feel like it, but IMO it would be far more beneficial for you getting it to work yourself after being pointed in the right direction, instead of asking someone else to just give you the solution. 

 

 

Your description sounds like you are still dealing with a selection of elements not matching your expectations.

If you also don't want that first link to get a ScrollTrigger, don't include it in the array of links that are relevant for you.

Below is an example for the aforementioned process of only selecting the relevant elements for your setup demonstrated in a different pen.

 

Notice how for the elements to be looped over and the respective links, I only use the elements that don't have the empty-class;

you can see in the console.log()s I added, that their lengths match up, so now clicking on the first blue link will trigger a tween on the first green box, because their indexes match up now, too. Don't mind the animation logic for now, just have a look at the selection of elements.

 

See the Pen ExOgJXw by akapowl (@akapowl) on CodePen

 

[Sukru]

@akapowl Thank you for the example. However, my issue is that unless an item has only a "section id," the next item in the menu should not be assigned an active class. As a result of this problem, the active classes in the menu, in combination with the scroll, trigger changes in the active classes within the menu. In the example you provided, the menu item doesn't apply any additional class; it appears to be triggered without modification. If there were an instance similar to my specific case, I could handle it more quickly. Can you assist me with this?

[akapowl]

 

33 minutes ago, Sukru said:

However, my issue is that unless an item has only a "section id," the next item in the menu should not be assigned an active class.

 

Sorry, but I'm not sure I understand what you mean by that - I still think your issue actually is mismatching arrays/nodelists with thus mismatching indexes.

 

If you want to find out what elements are relevant by checking if they have an id, here's an example of what you could do.

See the Pen bGQwPGv by akapowl (@akapowl) on CodePen

 

 

 

37 minutes ago, Sukru said:

In the example you provided, the menu item doesn't apply any additional class; it appears to be triggered without modification.

 

As I said, don't mind the animation logic in that example - the relevant thing for you there is the selection of elements to loop over and address within that loop. Instead of having them tween, I might as well just have toggled classes on them.

 

27 minutes ago, Sukru said:

If there were an instance similar to my specific case, I could handle it more quickly.

 

I will repeat what I said before; 

 

If you specifically want help with your usecase, please include another demo of what you tried yourself, so we can point you to what might be off in your case more easily.
 

[Sukru]

@akapowl  i got it, it's very true. I am sharing similar example to what I want.

 

Actually, it is my intention to examine this example.

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

 

I am using scrollsmoother and when I add it it loses its function inside the project.

See the Pen WNYGqam by sukruemanet (@sukruemanet) on CodePen

[akapowl]

 

That codepen example uses an approach a bit different logic-wise in the first place.

 

48 minutes ago, Sukru said:

I am using scrollsmoother and when I add it it loses its function inside the project.

 

Here are some pointers:

• you can not have elements with position: fixed inside your smooth-scrolling container
  https://greensock.com/docs/v3/Plugins/ScrollSmoother#caveats
   
• you'll need to set the height of the panels a bit different, than it was set in the original demo; which so far happens in an extra stylesheet loaded via the CSS section of the codepen demo, btw - I just set the min-height to 100vh for the moment

Also it seems you'll have to adjust the logic for the ScrollTriggers a bit.

The ScrollTriggers' end of 'bottom center' won't take the pin-distance of the .purple and .orange elements into account, which is why I manually calculate the STs distance for the two of those here differently than for the others - and instead of using that function onToggle, I add/remove the classes in the individual enter/leave callbacks.

I don't have the time to figure out the ideal approach for you, but this should work like what I understood you wanted to achieve.

Good luck with the project.

See the Pen wvQzVBZ by akapowl (@akapowl) on CodePen

[Sukru]

@akapowl thank you very much