shanefry

THANK YOU! ScrollTrigger.config({ignoreMobileResize: true}) This fixed all my mobile and tablet scrolling issues! You're a life saver ❤️

Here is the code pen I copy and pasted, the bug won’t happen inside of the code pen example which is odd. But once on my live server you can see the unexpected behaviour. https://codepen.io/cassie-codes/pen/ZEeeyOX/7663b55b05f5d473c0e61732fb9174b4 See live server bug here: https://shanefry.com/test Scroll once, let the scroll finish, and watch how it pulls you back to the start. (Keep in mind this is mobile and tablets only)

Oh shoot I was using an older version! I updated that, but this still didn't fix the issue

Hi, Here is the exact demo I used and the exact same code: https://codepen.io/cassie-codes/pen/ZEeeyOX/7663b55b05f5d473c0e61732fb9174b4 I noticed that on mobile it works on the codepen, but when uploaded to my live server the same issue happens. The scroll position gets reset to the very top... you can test it on your device here: https://shanefry.com/test Really weird and frustrating lol

Thanks Cassie! I included the locomotive scroll just because its being used but I don't believe its causing the issue. The issue disappears when I remove the following code: ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); I am fairly new to GSAP and used someone elses code. How does this section work so I could troubleshoot. I would assume yes it is returning 0 at weird times. I noticed its once the scroll comes to a stop it jumps right back to the top... super weird and I cant figure it out. I think you're spot on it has to do with scrollTo and scroll.instance, but I'm unsure how these work. Any help would greatly be appreciated!

Hi, I have come across a bug on mobile where if I scroll once and don't touch the screen again it automatically pulls the entire scroll position back to the top. I am not extremely familiar with GSAP and the horizontal scroll, as I used a common Codepen example to recreate this effect. My website is: shanefry.com Desktop: Have the horizontal scroll section - works as expected Mobile: I hide that section and display a mobile alternative - for some reason it gets pulled to the top (cant navigate the website) I find if I remove the horizontal scroll code, my website works as normal... So I'm assuming something here is causing my locomotive scroll to be reset back to the top? Is there a way to kill this code on mobile and tablet? The video attached shows the behavior I'm talking about. (Keep in mind I scroll once and don't touch the screen again) const pageContainer = document.querySelector('#scroller'); const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); gsap.registerPlugin(ScrollTrigger); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: "+=3000" }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh();