scrolltrigger Navigation between multiple horizontal scrolling sections

[chardin]

Hi, 

 

I would like to be able to navigate between two scrolling sections. Right now it works, but how can I be sure to always go to the beginning of the section? Also, I want the animation to be instantaneous. 

 

Also, there is a weird stutter sometimes once I have navigated to the section. Not sure what is causing that. 

 

See the Pen PoVPmrB by chethardin (@chethardin) on CodePen

[Rodrigo]

Hi @chardin and welcome to the GSAP forums!

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[chardin]

Hi @Rodrigo, 

 

This makes a lot of sense. One question, though, is there a way to make the navigation instant? I don't want to see the scrolling animation. 

 

Thanks! 

[Rodrigo]

Hi,

 

This should do it:

document.querySelectorAll("[data-trigger]").forEach((item, index) => {
  item.addEventListener("click", (event) => {
    event.preventDefault();
    const st = stInstances[index];
    gsap.set(window, { scrollTo: { y: st.start } });
  });
});

Hopefully this helps.

Happy Tweening!

[chardin]

Hmmm, that works great when navigating to the second section. But when going back to the first, it is still animated. (Sorry, not sure how to embed the codepen example again, but I updated my original one).

 

[chardin]

I see that the issue with animating the first section is that it's scrollTrigger's progress is set to 1 when we are beneath it. Is there a way to set the progress to 0 instead? 

[Rodrigo]

Hi,

 

That has to do with the fact that you have a scrub value different than true, that translate into the animation progress catching up during that time (1 second in your case). if you change that to just scrub: true it works but you don't get that scrub during a period of time effect.

 

This seems to work the way you expect:

document.querySelectorAll("[data-trigger]").forEach((item, index) => {
  item.addEventListener("click", (event) => {
    event.preventDefault();
    const st = stInstances[index];
    gsap.set(window, { scrollTo: { y: st.start } });
    st.animation.progress(0);
  });
});

Hopefully this helps.

Happy Tweening!