Jump to content
Search Community

Skew on scroll with ScrollTrigger - but with a horizontal scroll plugin?

andsavu test
Moderator Tag

Go to solution Solved by noviedo,

Recommended Posts

Hey guys,

 

so I'm trying to combine 2 CodePens:

https://cdpn.io/GreenSock/pen/eYpGLYL

https://cdpn.io/idiotWu/pen/KJNYye

 

basically, ScrollTrigger with a smooth scrollbar plugin, that actually works horizontally, lol.

I've got ScrollTrigger working with the regular/vertical scroll, but this one page in my project is actually horizontal.

 

Can anyone help me here? not sure what do I need to change to make it work?

I'm adding code that I think it's relevant for this issue (I've got a Gatsby JS setup):

 

      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, OverscrollPlugin /* you forgot this */);

      let bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar'), {
        overscrollEffect: 'bounce',
        alwaysShowTracks: true
      });

so this is how I made the horizontal scroll work

and this is what I previously used for regular scroll:

      let scrollPositionX = 0,
      scrollPositionY = 0

      bodyScrollBar.addListener(({ offset }) => {  
        scrollPositionX = offset.x;
        scrollPositionY = offset.y;
      });
      
      bodyScrollBar.setPosition(0, 0);
      gsap.registerPlugin(ScrollTrigger);
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        }
      });
      
      bodyScrollBar.addListener(ScrollTrigger.update);
        }

 

and then I just added that skew effect from the codepen.

It's there, I see it in inspect element, but I guess it's not moving because its not recognizing any Y scroll/scrollTop?

Link to comment
Share on other sites

22 minutes ago, andsavu said:

I guess it's not moving because its not recognizing any Y scroll/scrollTop?

Given the lack of information it's impossible to say. Most likely you're just not hooking things up correctly.

 

If you'd like debugging help please make a minimal demo of the issue in CodeSandbox or something as per this thread:

 

You can also debug it yourself, starting with one piece and adding things to it until it breaks. Then you've found where the issue is :) That's how you should make your minimal demo.

Link to comment
Share on other sites

@ZachSaucier hey man! thanks for joining in.

 

well, it's not much, I have a basic horizontall smooth scrollbar setup with 3 images, and I'm trying to add skew to them.

here's a quick codepen I made up using the other example:

 

See the Pen yLJwqby by andreitmm (@andreitmm) on CodePen

 

gsap.set(".item", {transformOrigin: "right center", force3D: true});

I set this to .item

and in inspect element I get this:

<div class="item" style="transform-origin: 100% 50%; transform: translate3d(0px, 0px, 0px);">Eaque ullam illum nobis deleniti mollitia unde, sed, nemo ipsa ratione ex, dicta aliquam voluptates! Odio vitae eum nobis dignissimos sunt ipsum repellendus totam optio distinctio. Laborum suscipit quia aperiam.</div>

so I guess .item is targeted, but it's not moving at all?

 

It's the same setup I have, with Smooth Scrollbar & a Horizontal Scroll Plugin.

Link to comment
Share on other sites

  • Solution

Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this:
 

// Setup Scrollbar
const scroller = document.querySelector("#scrollbar");

const bodyScrollBar = Scrollbar.init(scroller, {
  overscrollEffect: "bounce",
  alwaysShowTracks: true,
  delegateTo: document
});

ScrollTrigger.scrollerProxy(scroller, {
  scrollLeft(value) {
    if (arguments.length) {
      bodyScrollBar.scrollLeft = value;
    }
    return bodyScrollBar.scrollLeft;
  }
});

Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller.

bodyScrollBar.addListener(ScrollTrigger.update);

ScrollTrigger.defaults({ scroller: scroller, horizontal: true });

And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. 

bodyScrollBar.track.yAxis.element.remove();


Codepen:

See the Pen YzWgJWw by nazarenooviedo (@nazarenooviedo) on CodePen



I hope to help you 🙂

  • Like 2
Link to comment
Share on other sites

 

Hey @andsavu

 

I pinned down what's important for smooth-scrollbar (mainly how to setup the scrollerProxy) horizontal scrolling in this thread

 

 

 

And here is a pen with an example of how to integrate the skewing-on-scroll.

Don't let your eyes fool you though; the sections are not being skewed at all.

Depending on what type of monitor you use it might just look like it.

Only the buttons are being skewed(-x) on scroll.

 

See the Pen 89e1e228d20473dc8711240e1ff14800 by akapowl (@akapowl) on CodePen

 

 

 

Hope this is example enough for how to combine those two and helps you get where you want with this.

 

Edit:

Well, someone was seconds quicker than me 😅

 

Cheers,

Paul

 

 

  • Like 5
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...