Horizontal Scroll With GSAP Observer

[SaifUllah]

I am currently facing an issue with the GSAP Observer in a horizontal scroll scenario, where it seems to be extending beyond the intended boundaries and causing additional vertical space.

Specifically, when using the GSAP Observer in a horizontal scroll setup, I notice that it does not terminate properly, resulting in unwanted vertical spacing. It should end on last Green Section same like normal scrolling behavior.

 

I would greatly appreciate any insights or suggestions from the community regarding this issue. Are there any known workarounds or best practices that could help resolve this issue?

 

Any assistance or guidance would be highly appreciated as I strive to find a solution to this problem. Thank you in advance for your time and support.

 

See the Pen GRYwboZ by saifullahbutt85 (@saifullahbutt85) on CodePen

[Rodrigo]

Hi,

 

Thanks for pointing this issue.

 

Right now this seems to work:

let scrollInstance;
Observer.create({
  target: ".container",
  type: "wheel,touch,pointer",
  onPress: (self) => {
    self.startScroll = scrollTween.scrollTrigger.scroll();
    scrollTo = gsap.quickTo(scrollTween.scrollTrigger, "scroll", {
      duration: 0.5,
      ease: "power3"
    });
  },
  onDrag: (self) => {
    scrollInstance = scrollTo(self.startScroll + (self.startX - self.x) * dragRatio);
  },
  onDragEnd: () => {
    if (scrollTween.progress() === 1 && scrollTween.scrollTrigger.direction > 0) {
      scrollInstance && scrollInstance.kill();
      smoother.scrollTo(scrollTween.scrollTrigger.end);
    }
  }
});

Although the jump back is not really smooth:

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

 

Adding the smooth boolean in the scrollTo method ends up with the same behaviour we have now. We'll look into it and get back when we have more info about it.

 

Happy Tweening!

[Rodrigo]

Hi,

 

As it usually happens I thought of a better way a few minutes after posting 🤷‍♂️

 

Using the Clamp utility method is far better and cleaner than the solution I had in place previously:

onDrag: (self) => {
  scrollInstance = scrollTo(
    gsap.utils.clamp(
      0,
      scrollTween.scrollTrigger.end,
      self.startScroll + (self.startX - self.x) * dragRatio
    )
  );
},

I updated the codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[SaifUllah]

This works great. thanks @Rodrigo