Jump to content


  • Posts

  • Joined

  • Last visited

Everything 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> <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(); Registrazione schermo 2021-02-02 alle 22.05.52 (1).mov