GSAP & Locomotive Horizontal Scroll - Mobile Pulls Scroll Back to Top

[shanefry]

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();

 

 

 

 

[Cassie]

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;
  },
});

 

[shanefry]

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! 

 

 

[GSAP Helper]

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. 

[shanefry]

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 

[GreenSock]

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. 

[shanefry]

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

[GreenSock]

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. 

[shanefry]

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) 
 

 

[GreenSock]

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) 

[shanefry]

THANK YOU! 

 

ScrollTrigger.config({ignoreMobileResize: true})

 

This fixed all my mobile and tablet scrolling issues!

 

You're a life saver ❤️