How to make horizontal stacking divs with using Smooth Scrollbar plugin

[caxez 0 Likes (Newbie)]

I have the following code

<div class="scrollbar">
   <main class="main-container">
      <section class="section">1</section>
      <section class="section">2</section>
      <section class="section">3</section>
      <section class="section">4</section>
   </main>
</div>

<script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script>

.main-container {
   display: flex;
   position: relative;
   height: 100vh;
}

.section {
   background-color: #eae8e5;
   height: 100%;
   min-width: 100vw;
}

class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
   static pluginName = 'horizontalScroll';

   transformDelta(delta, fromEvent) {
      if (!/wheel/.test(fromEvent.type)) {
         return delta;
      }

      const { x, y } = delta;

      return {
         y: 0,
         x: Math.abs(x) > Math.abs(y) ? x : y,
      };
   }
}

Scrollbar.use(HorizontalScrollPlugin);

const scrollbar = Scrollbar.init(document.querySelector('.scrollbar'), {
   damping: 0.1,
   delegateTo: document,
   alwaysShowTracks: true,
});

Scrollbar.detachStyle();

I want it to be fixed on scroll when a block reaches a corner without preventing other blocks from scrolling as in this example https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f
Thanks in advance everyone

See the Pen d076a9cf4c1a952a0bc921a76bc2202f by akapowl (@akapowl) on CodePen

[GSAP Helper 97 Likes (Contributor)]

It's pretty tough to troubleshoot without a minimal demo - the demos you provided look like they were done by @akapowl and don't match the code you pasted in above. 

 

Also, if you want to use a 3rd party scroll library like that, you'll probably need to wire it up to ScrollTrigger.scrollerProxy(). Here's a quick demo from the docs: 

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

 

Keep in mind that we can't really support 3rd party tools like that. We're happy to answer any GSAP-specific questions though. 

 

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. 

[akapowl 5,215 Likes (Superhero)]

 

Since you are going to be acting in an actual horizontal scrolling scenario unlike that demo of mine which was purposed for fake-horizontal scrolling, you don't even need any of the fancy stuff from that demo of mine.

 

Just adjust the scrollerProxy, that Helper already mentioned, to also work with horizontal scrolling, by either exchanging all scrollTop values by scrollLeft or adding an extra part for scrollLeft alongside scrollTop, and then you can use ScrollTriggers pinning to achieve the result you are going for.

 

Just remember to also set horizontal: true on the ScrollTriggers you set up because you are working with actual horizontal scrolling - then you can e.g. use a start value like 'left left' and an end value depending on how exactly you want things to behave. If you want it to behave like that demo of mine you posted, you will probably want to set pinSpacing: false, too.

 

You'll find more information on all of those properties mentioned in the Scrolltrigger docs. Good luck!