ScrollTo problems while using ScrollTrigger

[JoPed]

Hi,

I'm very new to GSAP, so I this might be fairly simple or not possible to accomplish.

 

My problem:

 

I'm using the ScrollToPlugin for scrolling to a  given section, when clicking on the menu item corresponding to that section. I also use pinned scrolling - I have pinned scrolling between container 1/container 2, and between container 2/container 3.

 

What happens, is that when going to an section above where you are (in the document flow), either no scrolling appears to happen or it scrolls to the wrong section.  An example: Press "Item 2", and then when the scroll finishes press "Item 1". This results is no visual change, and the second section is still the one inside the viewport.

 

However if you press "Item 3" and then "Item 1" you go to item 2.

 

Here is the jsfiddle, https://jsfiddle.net/r7Lotu5w/

 

 

EDIT: I found a solution, where I disable scrolltrigger when using scrollto and the enable the scrolltrigger again once the scrolling is done. But I would still like to know if there is another way to achieve what is want.

 

Edited September 27, 2022 by JoPed
Found a solution.

[Rodrigo]

Hi @JoPed and welcome to the GreenSock forums!

 

Basically you have an error in your anchors click event handler. Your code is looping through every anchor and calling a GSAP instance for every anchor on every click event:

$("#navList .navLinks").on("click", function (event) {
    
  //Preventing the default action - in this case to not follow the given URL
  event.preventDefault();

  let current = $(this);


  let href = $(current.attr("href"));
  console.log(href);
  
  // HERE YOU'RE LOOPING THROUGH THE ANCHORS ON EACH CLICK EVENT
  $("#navList .navLinks").each(function () {
    gsap.to(window, {
      duration: 3,
      scrollTo: { y: href }
    });
  });

});

If you remove that extra loop and just run the gsap.to() method it seems to work as expected:

$("#navList .navLinks").on("click", function (event) {
    
  //Preventing the default action - in this case to not follow the given URL
  event.preventDefault();

  let current = $(this);
  let href = $(current.attr("href"));
  
  gsap.to(window, {
    duration: 3,
    scrollTo: { y: href }
  });

});

Let us know how this works.

 

Happy Tweening!!!

[JoPed]

@Rodrigo thank you for the quick response, but it does not work.

 

I want to be able to use the navbar to scroll to the section, corresponding to the li from the header.  And this only works, if the section you are going to are below the section you are currently at, for example it works when pressing "Item 1" and then "Item 2", and "Item 3" and "Item 4", but it does not work when pressing "Item 2" and then "Item 1". I think that is because of the pinned scrolling,  but i don't know for sure, and I don't know how to count the effect.

Edited September 27, 2022 by JoPed
Edit due to further testing

[Rodrigo]

Hi,

 

Yep, this example should be helpful in order to achieve that. Keep in mind to create all your ScrollTrigger instances first, before looping through the anchors in order to get the correct positions.

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

 

Note that with this approach you can use pinned and unpinned ScrollTriggers in your page.

 

Let us know if you have any other question.

 

Happy Tweening!

[GreenSock]

Here's a fork with a helper function I whipped together that should make this easier: 

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

[JoPed]

Thank you both for your help. Much appreciated!