ScrollTrigger for multiple horizontal scrolls together with the Anchor link

[chp910]

Hello, guys 
I tried to do the slide section to have a few items inside and make all the slides scroll horizontally. 

I did it, but I also need to have the Anchor navigation to the ScrollTriggered section,
I follow the demo here 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen.

, the horizontal slide section no problem.
But I face a problem when click the anchor link it does not scroll to the correct position as I href tag targeted

 

Below is my demo codepen, does anyone have a solution?
I am open to any modification or good practice that I do not apply
thank you in advance for your help
 

See the Pen YzdddpX by chp910 (@chp910) on CodePen.

[mvaneijgen]

Hi @chp910 welcome to the forum!

 

I did a quick fix to make things simpler. Your elements are X amount in width, but your scroll distance was a fixed 3500px, what I've done is make the scroll distance the same as the width of all the elements. 

 

Then in your click function we check how much that anchor is offset from the left and scroll to that position. Hope it helps and happy tweening! 

 

See the Pen bGOOZRd?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

 

If you still want to keep the 3500px scroll distance you could feed all the values to a gsap.utils.mapRange() function  https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() 

 

See the Pen bGOOZaV?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[chp910]

Hi @mvaneijgen thank you for the warm welcome!
Ya. It fixed my problem!
But I planning to add the active class when scrolling to the section of the relevant item, but how to combine it with the code that you helped me to fix?
Now I only added the code below when clicking the navTitle to add the active class
 

// add active class
$('.navTitle').each(function(){
  $('.navTitle').on('click', function() {
    $('.navTitle').removeClass('active');
    $(this).addClass('active');
  });
});

 

[mvaneijgen]

We like to scope these forums to GSAP related questions. What you're asking is Javascript (or in this case jQuery), unfortunately we don't have the resources to provide free general consulting. For that question you're on your own. If you have more GSAP related questions, feel free to post back here. 

 

Good luck and happy tweening!

 

 

[Rodrigo]

Hi,

 

You can use the Snap utility method in order to go through the current progress of the ScrollTrigger instance and update the links styles accordingly:

https://greensock.com/docs/v3/GSAP/UtilityMethods/snap()

 

Here is a fork of your example:

See the Pen WNLPodP by GreenSock (@GreenSock) on CodePen.

 

That codepen predicates on the fact that all your horizontal sections have the same width, which is not the case, so you'll have to figure your own custom logic for this, based on the width of each slide and the total width of all the slides. Unfortunately we don't have the time resources to create custom solutions or solve complex logic issues for our users, but this should be a good starting point.

 

Hopefully this helps.

Happy Tweening!

[chp910]

Hi @mvaneijgen thank you for your response.
I will try to explore more on GSAP function to achieve the result that I want.
Thank you again for the kind help. 
 

[chp910]

Hi @Rodrigo thank you for your response!
I didn't notice that the snap method also can be one of the solutions. I researched and previously referred to this

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

 

But it looks different with my current GSAP setting, thank you for your response let me have a new solution for it!

I will go check and play around with it. It helps me a lot! Thank you ^^