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
