Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Antonio9786

  1. 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 class="pin-box">
                  <div class="pin-box">



    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());