[Horizontal Scroll Locomotive scroll + ScrollTrigger annoying on mobile]

Hi! 

I have used Locomotive + Scrolltrigger and work correcly but i have a problem with mobile. 

In this page, with mobile (simulator and also with device), i have a shake scroll and isn't fixed.. This is so annoying for me, how can i fix this? 

 

In the attachment the video

 

Here the HTML structure 

<section id="sectionPin" >

        <div class="pin-wrap">

              <div class="pin-box">

              </div>

              <div class="pin-box">

              </div>

              <div class="pin-box">

              </div>

          </div>

</section>

 

 

 

This is the JS code 

 

scroll.on("scroll", ScrollTrigger.update);

 

ScrollTrigger.scrollerProxy(".scroll-container", {

scrollTop(value) {

return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;

},

getBoundingClientRect() {

return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};

},

 

});

 

var pinBoxes = $('.pin-box'); 

var pinBoxWidth = pinBoxes.width(); 

var windowWidth = $(window).innerWidth(); //Prende la larghezza di tutto lo schermo 100vh

var pinWrap = $('.pin-wrap'); //Prende il wrap totale che contiene tutto

var pinWrapWidth = windowWidth * pinBoxes.length; //Larghezza finestra * .length vede quanti contenitori ci sono con pinbox

var horizontalScrollLength = (pinBoxes.length - 1) * windowWidth;

pinWrap.width(pinWrapWidth); // Da al contenitore totale una alrghezza fissa

 

gsap.to(".pin-wrap", {

  scrollTrigger: {

  scroller: ".scroll-container",

  scrub: true,

  trigger: "#sectionPin",

  pin: true,

  // anticipatePin: 1,

  start: "top top",

  end: pinWrapWidth,

},

  x: -horizontalScrollLength,

  ease: "none"

});

 

ScrollTrigger.addEventListener("refresh", () => scroll.update());

ScrollTrigger.refresh();