Help with jumping to section using ScrollToPlugin in fake horizontal scrolling layout

[Lily]

I have a (fake) horizontal scrolling site using ScrollTrigger. I have a menu that needs to link to the second section (#section2). Both the first and second sections are full width (100vw). I am able to scroll close to the section, but there is a gap between the left of the screen and the beginning of the section. How do I get it to correctly jump all the way to the section?

 

I provided a minimal demo with the link inside the first section. I greatly appreciate any help on this

See the Pen rNpvqBj by halcyon_studios (@halcyon_studios) on CodePen

[GreenSock]

You're basing your calculation on the horizontal position (left) whereas you actually need to correlate it to the vertical scroll position. 

 

There are a bunch of ways to do this, but it has been asked before in the forums so I just created a new helper function that should make it a lot easier. It's in the docs now too. 

 

I forked your demo, added a list of links in a fixed-position <div> and leveraged this helper function: 

 

/*
Returns a FUNCTION that you can feed an element to get its scroll position.
- targets: selector text, element, or Array of elements 
- containerAnimation: the horizontal scrolling tween/timeline. Must have an ease of "none"/"linear".
- position: defaults to "left left" but can be anything like "center center", "100px 80%", etc. Same format as "start" and "end" ScrollTrigger values.
*/
function getScrollLookup(targets, containerAnimation, position) {
  let triggers = gsap.utils.toArray(targets).map(section => ScrollTrigger.create({
        trigger: section,
        start: position || "left left",
        containerAnimation: containerAnimation
      })),
      st = containerAnimation.scrollTrigger;
  return target => {
    let t = gsap.utils.toArray(target)[0],
        i = triggers.length;
    while (i-- && triggers[i].trigger !== t) {};
    return i >= 0 ? st.start + (triggers[i].start / containerAnimation.duration()) * (st.end - st.start) : console.warn("target not found", target);
  };
}

So it works even when the sections are different widths, etc. And you can set it to go to "center center", "left left", or whatever (like the start and end values on ScrollTriggers): 

 

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

 

Does that help? 

[Lily]

10 hours ago, GreenSock said:

Does that help? 

Thank you SO MUCH! It's working perfectly now. I appreciate the thoughtful response and I'm happy to be here in the gsap forums!