Jump to content
Search Community

Horizontal Scroll Locomotive scroll + ScrollTrigger annoying on mobile

Antonio9786 test
Moderator Tag

Recommended Posts

Hi! 

I have used Locomotive + Scrolltrigger and work correcly but i have a problem with mobile. 

In this page, with mobile (simulator and also with device), i have a shake scroll and isn't fixed.. This is so annoying for me, how can i fix this? 

 

In the attachment the video

 

Here the HTML structure 

<section id="sectionPin" >
        <div class="pin-wrap">
              <div class="pin-box">
              </div>
              <div class="pin-box">
              </div>
              <div class="pin-box">
              </div>
          </div>
</section>
 

 

 

This is the JS code 

 

scroll.on("scroll", ScrollTrigger.update);
 
ScrollTrigger.scrollerProxy(".scroll-container", {
scrollTop(value) {
return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
},
 
});
 
var pinBoxes = $('.pin-box'); 
var pinBoxWidth = pinBoxes.width(); 
var windowWidth = $(window).innerWidth(); //Prende la larghezza di tutto lo schermo 100vh
var pinWrap = $('.pin-wrap'); //Prende il wrap totale che contiene tutto
var pinWrapWidth = windowWidth * pinBoxes.length; //Larghezza finestra * .length vede quanti contenitori ci sono con pinbox
var horizontalScrollLength = (pinBoxes.length - 1) * windowWidth;
pinWrap.width(pinWrapWidth); // Da al contenitore totale una alrghezza fissa
 
gsap.to(".pin-wrap", {
  scrollTrigger: {
  scroller: ".scroll-container",
  scrub: true,
  trigger: "#sectionPin",
  pin: true,
  // anticipatePin: 1,
  start: "top top",
  end: pinWrapWidth,
},
  x: -horizontalScrollLength,
  ease: "none"
});
 
ScrollTrigger.addEventListener("refresh", () => scroll.update());
ScrollTrigger.refresh();
 

Link to comment
Share on other sites

 

Hey @Antonio9786

 

If you check the locomotive-scroll demo on the docs-page for scrollerProxy, you'll notice, it has one line for the pinType, which you don't seem to have included. From experience, my guess would be, that there is a decent chance, this will get rid of your annoying shaking

 

// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".smooth-scroll", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"
});

 

 

But without a minimal demo that reproduces your issue it is always hard to tell, so if this above doesn't work for you, please create one, if you need further assistance on this.

 

Hope this helps though. Oh, and welcome to the forums :) 

 

Cheers,

Paul

 

  • Like 4
Link to comment
Share on other sites

  • 8 months later...
    ScrollTrigger.matchMedia({
      "(max-width:999px)": function () {
        cBlockDetails.forEach((cBlockDetail, i) => {
          ScrollTrigger.create({
            trigger: cBlockDetail,
            scroller: "#main_scroll",
            horizontal: false,
            toggleClass: { targets: cBlockDetail, className: "is-show" },
          });
        });
 
        oImages.forEach((oImage) => {
          ScrollTrigger.create({
            trigger: oImage,
            scroller: "#main_scroll",
            horizontal: false,
            toggleClass: { targets: oImage, className: "is-show" },
          });
        });
      },
    });
Link to comment
Share on other sites

 

Hello @moin_shaikh_611

 

Do you mean the locomotive-scroll demo on the scrollerProxy() docs-page?

 

That one is not working at the moment because things appear to have gotten a bit out of order there - could @Cassie @GreenSock or @OSUblaketake a look, please? 

 

*** Update: fixed ***

 

See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen

 

 

 

In the meantime here is a working fork of the demo - hope it helps :) 

 

See the Pen 54f21d3def0ae4176857f36fd8e0fad7 by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

 

...and now I see you posted again and mean something different.

 

Unfortunately we can not really help from a codesnippet alone, so if you need some assistance, it would be great if you could post a minimal demo showing your problem and explain in a bit more detail, what it is you are trying to achieve. Thanks

  • Like 1
Link to comment
Share on other sites

 

Sorry, but remote website debugging is not within the scope of the support in these forums.

 

We just don't have the ressources to dig through possibly hundreds of lines of (even minified) code, which possibly even contains other libraries that might be the cause of the issue - that is why we ask for a minimal demo, reduced to a bear minimum to showcase your issue on a platform like codepen.io, that we can have a quick glance at and tinker with.  Please take a look at the forum guidelines.

 

Reducing your code down to a bare minimum in many cases even helps yourself find the issue that is causing your problems.

And if by doing so, you can still not identify what is the root of your problem, we will gladly help you with any GSAP specific questions.

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...