shanefry Posted December 26, 2022 Share Posted December 26, 2022 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(); Link to comment Share on other sites More sharing options...
Cassie Posted December 26, 2022 Share Posted December 26, 2022 Hey there! Locomotive isn't one of our tools so I'm afraid we can't really help with bugs, but we can help with only running code on mobile and tablet.https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Keep in mind that all the GSAP animations and ScrollTriggers created inside a matchMedia function get reverted automatically - but not anything to do with locomotive. You'd have to handle that yourself. FYI - This following section is what I'm talking about. This isn't GSAP-related code const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); If you're bug hunting this is where I'd start looking for something funny 👀 ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { // What value is getting returned here? Is it returning 0 at strange times? return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, }); 1 Link to comment Share on other sites More sharing options...
shanefry Posted December 26, 2022 Author Share Posted December 26, 2022 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! Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 26, 2022 Share Posted December 26, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Also please make sure you're using the latest version of all the GSAP files (3.11.4 at this moment). Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
shanefry Posted December 26, 2022 Author Share Posted December 26, 2022 Hi, Here is the exact demo I used and the exact same code: See the Pen 7663b55b05f5d473c0e61732fb9174b4 by cassie-codes (@cassie-codes) on CodePen 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 Link to comment Share on other sites More sharing options...
GreenSock Posted December 26, 2022 Share Posted December 26, 2022 It looks like you're using a super old version of GSAP, and mixing that with a newer version of ScrollTrigger. If you pop open your console, you'll see this warning: "Requires GSAP 3.11.0 or later" You're using GSAP 3.5.1. Just update everything to 3.11.4 and hopefully you'll be golden. 1 Link to comment Share on other sites More sharing options...
shanefry Posted December 26, 2022 Author Share Posted December 26, 2022 Oh shoot I was using an older version! I updated that, but this still didn't fix the issue Link to comment Share on other sites More sharing options...
GreenSock Posted December 26, 2022 Share Posted December 26, 2022 How can we reproduce the issue? We really need a minimal demo that reproduces the issue, @shanefry (like a CodePen or CodeSandbox) - we're eager to help with any GSAP-specific questions. Link to comment Share on other sites More sharing options...
shanefry Posted December 26, 2022 Author Share Posted December 26, 2022 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. See the Pen 7663b55b05f5d473c0e61732fb9174b4 by cassie-codes (@cassie-codes) on CodePen 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) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 26, 2022 Solution Share Posted December 26, 2022 Your CodePen is also using a super old version of GSAP too. I'd recommend finding exactly what's different between the working CodePen version and your live version. Are your LocomotiveScroll versions the same? Also, I think LocomotiveScroll changed their API in version 4 and your code in your demo doesn't look updated. For the scrollerProxy(), for example, in the newer version of LocomotiveScroll you'd do: ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, {duration: 0, disableLerp: true}) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); You may also want to try setting ScrollTrigger.config({ignoreMobileResize: true}) just to see if that improves anything. Like Cassie said, though, we really can't support 3rd party libraries here but we're happy to help with any GSAP-specific stuff. Can you reproduce the problem after completely removing LocomotiveScroll? (Don't even load it) Link to comment Share on other sites More sharing options...
shanefry Posted December 29, 2022 Author Share Posted December 29, 2022 THANK YOU! ScrollTrigger.config({ignoreMobileResize: true}) This fixed all my mobile and tablet scrolling issues! You're a life saver ❤️ 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now