Locomotive Scroll / GSAP (Horizontal Scroll)

[Justine4s]

Hello 👋

We have two horizontal scroll in the same page. The probleme is that when we scroll in a mobile the second scroll crash (the first one come over the second).

` const scroller = document.querySelector('#scroller');

      const locoScroll = new LocomotiveScroll({
        el: scroller,
        smooth: true,
        mobile: {
          smooth: true,
        },
        tablet: { 
          smooth: true,
        }
      });

      ScrollTrigger.scrollerProxy(scroller, {
        scrollTop(value) {
          return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
        }, 
        getBoundingClientRect() {
          return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
        },
        // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
        pinType: scroller.style.transform ? "transform" : "fixed"
      });
      
      ScrollTrigger.defaults({
        scroller: scroller
      })
      const horizontalSections = gsap.utils.toArray('section.horizontal')`

`horizontalSections.forEach(function (sec, i) {

var thisPinWrap = sec.querySelector('.pin-wrap');
var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');

var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);

gsap.fromTo(thisAnimWrap, {
x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()
}, {
x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0,
ease: "none",
scrollTrigger: {
trigger: sec,
scroller: scroller,
start: "top top",
end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
pin: thisPinWrap,
invalidateOnRefresh: true,
anticipatePin: 1,
scrub: true,
//markers: true
}
});

});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh(); `

Thank you 👊