Locomotive Scroll / GSAP (Horizontal Scroll)

[yann08300]

Hy, first sorry for my english I'm french 😅.

I'm working on a website and I have a problem with an horizontal scroll on the mobile versio. The fact is that we have two horizontal scroll in one page, on the first scroll, everithing is ok, but when we finish to scroll the second one, the first pass over the second.

    const scroller = document.querySelector('#scroller');
          
          const locoScroll = new LocomotiveScroll({
            el: scroller,
            smooth: true,
            smartphone: {
              smooth: true,
            },
            tablet: { 
              smooth: true,
            }
          });
          // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
          locoScroll.on("scroll", ScrollTrigger.update);
          
          // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
          ScrollTrigger.scrollerProxy(scroller, {
            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: scroller.style.transform ? "transform" : "fixed"
          });
          
          ScrollTrigger.defaults({
            scroller: scroller
          })
          
          
          
          /* Scroll locomotive + horizontal */
          const horizontalSections = gsap.utils.toArray('section.horizontal')
          // const getMaxWidth = () => {
          //     maxWidth = 0;
          //     sections.forEach((section) => {
          //         maxWidth += section.offsetWidth;
          //     });
          //     console.log(maxWidth);
          // };
          
          horizontalSections.forEach(function (sec, i) {	
            let horizontal = document.querySelectorAll('.horizontal');
            var thisPinWrap = sec.querySelector('.pin-wrap');
            var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');
            // getMaxWidth();
            var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); 
          
            gsap.fromTo(thisAnimWrap, { 
              x: () => 0
            }, { 
              x: () => getToValue(), 
              ease: "none",
              scrollTrigger: {
                mobile:{
                  smooth: true,
                },
                trigger: sec,		
                scroller: scroller,
                start: "top top",
                end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
                pin: thisPinWrap,
                invalidateOnRefresh: true,
                anticipatePin: 1,
                scrub: true,
                //markers: true
              }
            });
          
          });	

Did you have something to help us or not ? 

 

Thanks in advance to the team.

[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? 

 

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. 

[yann08300]

Okay sorry I forgot it thanks for your fast response, I put one of the scroll that I have, we have two like this, there're the same, but on a mobile version, the first pass other the second. You have our fonction and our css. We not big dev so it's possible that our code is not too organized😅.

See the Pen rNrLJwq by yann08300 (@yann08300) on CodePen

[Rodrigo]

Hi @yann08300 and welcome to the GreenSock forums!

 

What exactly is the issue you're having? In the codepen example I see everything working as it should, or maybe I'm missing something here 🤷‍♂️

 

If you could clarify the issue you're dealing with, it would be great.

 

Happy Tweening!

[yann08300]

Hi, 

The problem is that on mobile device the horizontal scroll is broken, like the capture on my precedent post. It possibly work because of code pens but when I pass it in production the first scroll pass over the second one.

 

 

You can see it here.

[Rodrigo]

Hi,

 

Yeah, it seems to be related to the address bar hiding/showing when you reach the end of the page. Try using ScrollTrigger's normalizeScroll method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

This seems to work on android devices:

const scroller = document.querySelector("#scroller");
gsap.registerPlugin(ScrollTrigger);

// ADD THIS
ScrollTrigger.normalizeScroll(true);

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

Also remember that if you want it to skip the refresh that happens when the address bar shows/hides, you can do: 

ScrollTrigger.config({ ignoreMobileResize: true });

 

What version of LocomotiveScroll are you using? I know LocomotiveScroll had some bugs and also they changed part of their API in v4, so you may need to update your scrollerProxy(). For example: 

// old
locoScroll.scrollTo(value, 0, 0)

// new
locoScroll.scrollTo(value, {duration: 0, disableLerp: true})

That's reflected on the demo in our docs here: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

[yann08300]

Hi, thank you for your response. I think that use the last version of locomotive scroll because I took the file in their github. I'll try the solution in my website, for the moment it working. Thank you for your help. If I have a question I'll ask you.