GSAP (ScrollTrigger, ScrollToPlugin) Vertical Scroll with Horizontal Scroll. Horizontal navigation issue

[bubenko]

Hi @GreenSock community, 

 

I am relatively new to GSAP. I'm currently building a page where the user scrolls (vertically) through the page, and when he comes to a certain point horizontal scroll section with menu fires.

 

The issue I am having is that when using the menu for the horizontal scroll it is not scrolling to the correct panel.

 

Here is simplified version of CodePen: 

 

Thank you guys for your help!

See the Pen xxqaKVx by skip229 (@skip229) on CodePen

[akapowl]

 

Well, I guess that panelsSection.offsetTop actually doesn't do much in my demo.

 

You'll have to get the container's offset from the top of the page (which is relevant for the position to scroll to) in a different way to make it work.

 

Maybe something like this - seems to work better now at least

 

let containerOffsetFromTop = offset(panelsSection)

function offset(el) {
  var rect = el.getBoundingClientRect(),
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return rect.top + scrollTop
}

ScrollTrigger.addEventListener('revert', () => { containerOffsetFromTop = offset(panelsSection) })

 

 

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

[akapowl]

Okay, coming to think of it, it makes total sense that the panelsSection.offsetTop didn't work (and always retuned 0) as the container is being pinned and thus it is inside a pin-spacer element. Since offsetTop always returns an element's offset to the top of the parent element it would always be 0, no matter what.

 

So there actually is another fix by simply just exchanging panelsSection.offsetTop with panelsSection.parentElement.offsetTop in the previous version which will then get the correct offset (the one of the pin-spacer) to the top of the parent-element (which would be the body then).

 

Depending on the usecase, some might be preferred over the other, so I'll just leave both solutions in here.

 

This here appears to be the easier one though.

 

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