MatteoIommi

Hello, I have a problem with the horizontal scroll on mobile view. It gets all flickering. Here is a screen recording of the problem: https://vimeo.com/837514328?share=copy I made a codepen but I can't re-create the problem that I'am facing. You can see it live at https://nos.agency/santacassella/ospitalita/ Edit* I didn't mention that I also have Scroll Smoother setup. I added the code in the js snippet. This is my HTML code: <div id="horizontal"> <div class="panel one"> <span class="tour-number">01</span> <span class="tour-activity">Visita in vigna</span> </div> <div class="panel two"> <span class="tour-number">02</span> <span class="tour-activity">Punti panoramici</span> </div> <div class="panel three"> <span class="tour-number">03</span> <span class="tour-activity">Raccolta frutta</span> </div> <div class="panel four"> <span class="tour-number">04</span> <span class="tour-activity">Vecchio Giardino</span> </div> <div class="panel fiv"> <span class="tour-number">05</span> <span class="tour-activity">Degustazione</span> </div> </div> This is my CSS code: /** * horizontal * */ #horizontal{ display:flex; flex-wrap:nowrap; } #horizontal .panel{ min-width:750px; min-height:500px; box-shadow:0 0 14px #00000026; margin:0 50px; background-size:cover ; position:relative; } And here is my JS let smoother; function smootherSetup(){ smoother = ScrollSmoother.create({ smooth: 0.6, // seconds it takes to "catch up" to native scroll position effects: true // look for data-speed and data-lag attributes on elements and animate accordingly }); } smootherSetup(); .... let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -150 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: "#horizontal", pin: true, scrub: 0.1, start:'center center', //snap: directionalSnap(1 / (sections.length - 1)), end: "+=2500" } }); I would like to preserve the horizontal scroll on mobile. Thanks in advance for the help.