Vertical Scroll Section with GSAP ScrollTrigger and Locomotive Scroll

[zoruak]

Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far

gsap.registerPlugin(ScrollTrigger);
  

gsap.registerPlugin(ScrollTrigger);
  
const scrollContainer = document.querySelector('.data-scroll-container');    
  
const locoScroll = new LocomotiveScroll({
            el: scrollContainer,
            direction: 'horizontal',
            smooth: true,
            /*lerp: 0.1,*/
            /*touchMultiplier: 2.54,*/
            reloadOnContextChange: true,
            tablet: {
                smooth: true,
                direction: 'horizontal',
              gestureDirection: 'both',
            },
            smartphone: {
                smooth: true,
                direction: 'vertical',
            }
        });
  
  window.onresize = function(){ location.reload(); }
  
locoScroll.on('scroll', ScrollTrigger.update);  
ScrollTrigger.scrollerProxy(scrollContainer, {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  },
	scrollLeft(value) {
        return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x;
      },
	// 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: scrollContainer.style.transform ? "transform" : "fixed"
});  
  
window.addEventListener("load", function () {
  let pinBoxes = document.querySelectorAll(".pin-wrap > *");
  let pinWrap = document.querySelector(".pin-wrap");
  let pinWrapWidth = pinWrap.offsetHeight ;
  let horizontalScrollLength = pinWrapWidth - window.innerHeight;  
  
gsap.to(".pin-wrap", {
    scrollTrigger: {
      scroller: scrollContainer, //locomotive-scroll
      scrub: true,
      trigger: "#sectionPin",
			onEnter:() => {
            console.log("Enter")
          },
      pin: true,
			//horizontal: true,
      // anticipatePin: 1,
      start: "left center",
      end: pinWrapWidth
    },
	/*y: -horizontalScrollLength, 
  ease: "none"*/
  });
  
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();  
});

I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this.

As attribute I do have data-section in each section, as its not working else...

 

Hope someone can help me!!! ❤️

 

Cheers

zoruak

See the Pen qBNvrRQ?editors=1010 by cameronknight (@cameronknight) on CodePen

[Cassie]

Hi @zoruak,

 

I'm afraid it's near impossible for us to help debug without a minimal demo showing the issue.

Could you put together a minimal example of your setup on either codepen or codesandbox for us?

 

[akapowl]

Welcome to the forums @zoruak

 

ScrollTriggering heavily depends on the markup/styling, so it is pretty hard to tell anything from just your JS code - and from a quick glance, to me nothing stands out as particularly wrong. So a minimal demo of your scenario would really be appreciated to offer some help on this.

 

29 minutes ago, zoruak said:

As attribute I do have data-section in each section, as its not working else...

 

If by data-section you mean data-scroll-section and you are trying to pin a section which has that attribute, that just won't work with ScrollTrigger, as locomotive will inevitably tell that section to keep on moving, no matter what, so there will be nothing ScrollTrigger can do about that. But I also don't think locomotive-scroll wouldn't work without that attribute, since it is just optional to use it. But maybe I just did not understand you correctly? ...again; a minimal demo of your scenario would really help.

 

Maybe one of these threads can help you in the meantime ( the latter of the two does also contain an example for a horizontal scrolling in locomotive-scroll with a fake-vertical scroll mixed in, if that is what you're after in the long run)

 

 

 

[zoruak]

On 1/4/2022 at 12:14 PM, Cassie said:

Hi @zoruak,

 

I'm afraid it's near impossible for us to help debug without a minimal demo showing the issue.

Could you put together a minimal example of your setup on either codepen or codesandbox for us?

 

Dear @Cassie  I can try, but it is a Wordpress Website with Elementor I am working on. And its quite hard to create a demo  I could share the link. But I dont know if that helps.

[zoruak]

Dear @akapowl 

 

Thanks!

Well I will try to do it without the scroll section and try to use one of the links you provided.

I will do a follow up as soon as I tried it out

 

Cheers!

[zoruak]

On 1/4/2022 at 12:16 PM, akapowl said:

Welcome to the forums @zoruak

 

ScrollTriggering heavily depends on the markup/styling, so it is pretty hard to tell anything from just your JS code - and from a quick glance, to me nothing stands out as particularly wrong. So a minimal demo of your scenario would really be appreciated to offer some help on this.

 

 

If by data-section you mean data-scroll-section and you are trying to pin a section which has that attribute, that just won't work with ScrollTrigger, as locomotive will inevitably tell that section to keep on moving, no matter what, so there will be nothing ScrollTrigger can do about that. But I also don't think locomotive-scroll wouldn't work without that attribute, since it is just optional to use it. But maybe I just did not understand you correctly? ...again; a minimal demo of your scenario would really help.

 

Maybe one of these threads can help you in the meantime ( the latter of the two does also contain an example for a horizontal scrolling in locomotive-scroll with a fake-vertical scroll mixed in, if that is what you're after in the long run)

 

 

 

@akapowl And yes if I dont use the data-scroll-section it wont show up  just missing...

[akapowl]

Well that's really odd, since it works just fine without those attributes (as intended, I'd say) outside of Wordpress/Elementor.

 

See the Pen 87ad10833ca73c5a1ea59190fae48e32 by akapowl (@akapowl) on CodePen

 

I have no experience with those whatsoever, so I really can not offer any help, unless you could recreate that behaviour in a minimal demo.

And if you can't, then I'm pretty sure it is more of an Elementor thing / related to the plug-in making locomotive-scroll possible in Elementor.

 

So your best shot would probably be asking somebody in that realm.