ScrollTrigger pins causing random auto scrolling on touch devices

aviolin · July 2, 2022

First off, the codepen *works*, HOWEVER, when I use VSCode live server and test the following code (which is exactly the same as the codepen), I'm running into the problem on Android, iPhone and iPad.

As I scroll down to the bottom of the page, and stop scrolling for a second, the page randomly scrolls itself up or down (usually up) a bit. I can't seem to recreate the problem on my laptop or with devtools, so maybe it has something to do with touch devices? The weirdest thing is that I'm only having the problem when using VSCode live server (and, originally, on Webflow where the full site is being built), but I'm not having the problem with the same exact code on codepen. Maybe because codepen is using an iFrame?

Any ideas? Here is minimal amount of code required to recreate the issue with VSCode live server:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <style>
  html {
  	scroll-behavior: smooth;
  }
  .spacer {
    height: 100vh;
    background: #f0f0f0;
  }
</style>
</head>
<body class="body">
  <div class="spacer"></div>
  <div class="container">
    <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div>
  </div>
  <div class="spacer"></div>
  <div class="container">
    <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div>
  </div>
  <div class="spacer"></div>
  <div class="container">
    <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div>
  </div>
  <div class="spacer"></div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js" integrity="sha512-v8B8T8l8JiiJRGomPd2k+bPS98RWBLGChFMJbK1hmHiDHYq0EjdQl20LyWeIs+MGRLTWBycJGEGAjKkEtd7w5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
  <script>
  const initRevealTextOnScroll = () => {
    gsap.utils.toArray(".anim__text").forEach((text, i) => {
      gsap.to(text.parentElement, {
        scrollTrigger: {
          trigger: text.parentElement,
          pin: true,
          start: "center center",
          end: "+=1000",
        }
      });
    });
  }
  
  const initAnimations = () => {
    gsap.registerPlugin(ScrollTrigger);
    initRevealTextOnScroll();
  }

  window.addEventListener('load', e => {
    console.log('Window fully loaded');
    initAnimations();
  });
</script>
</body>
</html>

Edit: I made a short YouTube video to show what's happening for me:

See the Pen qBodXYB by aviolin (@aviolin) on CodePen

GreenSock · July 2, 2022

Yeah, that certainly sounds like something odd in your local setup. I can't think of anything in ScrollTrigger that'd cause it to automatically scroll like that, especially because you don't even have any snapping applied.

You should definitely avoid doing this:

scroll-behavior: smooth;

That basically makes the browser refuse to go to the appropriate scroll position immediately when ScrollTrigger is doing its refresh and calculating positions. If you need ScrollSmoothing, you might want to look into https://greensock.com/scrollsmoother

aviolin · July 2, 2022

Thanks for the response! I went ahead and made a github page here that uses just the one html file in the first post: https://arlocodes.com/gsap-pinning-bug I'm seeing jumpy scrolling issues on both my Android and iPad. I went ahead and removed the smooth scrolling, but the issue is still there. The page will randomly jump up a bit, you just don't see it smoothly scroll to the random position any more. That Github page is literally just the code I posted above, so it shouldn't have anything to do with my local setup. Any other ideas on this one? Thanks for your time!

GreenSock · July 3, 2022

It sounds like it may be the ScrollTrigger.refresh() that's triggered by the address bar showing/hiding which resizes the viewport. ScrollTrigger waits for the scrolling to stop before doing the refresh(), otherwise momentum scrolling would be interrupted. Have you tried this?:

ScrollTrigger.config({ ignoreMobileResize: true });

aviolin · July 3, 2022

Awesome! I hadn't tried that. That makes sense and it does seem to do the trick. I appreciate the help on this!

handiworknyc · October 18, 2022

Thanks for this... took me hours of troubleshooting and adding that line fixed the bug.

Notifications

Messages

ScrollTrigger pins causing random auto scrolling on touch devices

Recommended Posts

aviolin

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

aviolin

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

aviolin

Link to comment

Share on other sites

handiworknyc

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members