yann08300

Hi, thank you for your response. I think that use the last version of locomotive scroll because I took the file in their github. I'll try the solution in my website, for the moment it working. Thank you for your help. If I have a question I'll ask you.

Hi, The problem is that on mobile device the horizontal scroll is broken, like the capture on my precedent post. It possibly work because of code pens but when I pass it in production the first scroll pass over the second one. You can see it here.

Okay sorry I forgot it thanks for your fast response, I put one of the scroll that I have, we have two like this, there're the same, but on a mobile version, the first pass other the second. You have our fonction and our css. We not big dev so it's possible that our code is not too organized?. https://codepen.io/yann08300/pen/rNrLJwq

Hy, first sorry for my english I'm french ?. I'm working on a website and I have a problem with an horizontal scroll on the mobile versio. The fact is that we have two horizontal scroll in one page, on the first scroll, everithing is ok, but when we finish to scroll the second one, the first pass over the second. const scroller = document.querySelector('#scroller'); const locoScroll = new LocomotiveScroll({ el: scroller, smooth: true, smartphone: { smooth: true, }, tablet: { smooth: true, } }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(scroller, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. 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 }) /* Scroll locomotive + horizontal */ const horizontalSections = gsap.utils.toArray('section.horizontal') // const getMaxWidth = () => { // maxWidth = 0; // sections.forEach((section) => { // maxWidth += section.offsetWidth; // }); // console.log(maxWidth); // }; horizontalSections.forEach(function (sec, i) { let horizontal = document.querySelectorAll('.horizontal'); var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); // getMaxWidth(); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); gsap.fromTo(thisAnimWrap, { x: () => 0 }, { x: () => getToValue(), ease: "none", scrollTrigger: { mobile:{ smooth: true, }, trigger: sec, scroller: scroller, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: true, //markers: true } }); }); Did you have something to help us or not ? Thanks in advance to the team.