ScrollTrigger not work when direction is horizontal

Question

I have a sample code, using gsap and Locomotive Scroll

<div data-scroll-container>
   <section id="home" class="section">Section home</section>
   <section id="about" class="section">Section about</section>
   <section id="contact" class="section">Section contact</section>
</div>

And my javascript

gsap.registerPlugin(ScrollTrigger);
const pageContainer = document.querySelector('[data-scroll-container]');
const scroller = new LocomotiveScroll({
   el: pageContainer,
   smooth: true,
   direction: 'horizontal'        
});
scroller.on("scroll", ScrollTrigger.update);

const sections = gsap.utils.toArray(".section");
sections.forEach((section, i) => {
   ScrollTrigger.create({
      trigger: section,
      start: () => "top top-=" + (section.offsetLeft - window.innerWidth),
      end: () => "+=" + section.offsetWidth,
      onEnter: () => {
         let section_id = section.getAttribute('id');
         console.log("onEnter "+section_id);
      },
      onEnterBack: () => {
         console.log("onEnterBack");
      },
      onLeave: () => {
         console.log("onLeave");
      },
      onLeaveBack: () => {
         console.log("onLeaveBack");
      },
   });
});

ScrollTrigger.addEventListener("refresh", () => scroller.update());
ScrollTrigger.refresh();

When I scroll wheel mouse, ScrollTrigger not catch event onEnter, onEnterBack...

Marc Bosse · Answer 1 · 2022-12-22T14:59:06.290

It looks like you're missing a couple things in order for your Locomotive-Scroll to work (even before factoring in GSAP & ScrollTrigger). I see you've defined the data-scroll-container but the inner elements are missing the data-scroll-section & data-scroll directives.

Compare your code to this snippet from the docs. Your first code block should look like this:

<div data-scroll-container>
   <section data-scroll-section id="home" class="section">
      <h1 data-scroll>Section home</h1>
   </section>
   <section data-scroll-section id="about" class="section">
      <h1 data-scroll>Section about</h1>
   </section>
   ...
</div>

I'm on a similar journey and find that approaching the problem in smaller, manageable, chunks makes it easier to develop. Start by getting your Horizontal-Scrolling running smoothly then layer-in GSAP tweened animations (still working on this last bit).

The reason ScrollTrigger isn't working is because the scrolling is controlled by Locomotive-Scroll now + it's horizontal. So the issue is essentially that the scroll has been hijacked & ScrollTrigger doesn't know when to trigger animation on the timeline).

I suggest reading the docks related to ScrollTrigger.scrollerProxy(). There's also a great working demo to base yourself on. Worked for me!

ScrollTrigger not work when direction is horizontal

1 Answers1