andsavu Posted November 16, 2020 Share Posted November 16, 2020 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 More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 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 More sharing options...
andsavu Posted November 16, 2020 Author Share Posted November 16, 2020 @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 More sharing options...
Solution noviedo Posted November 17, 2020 Solution Share Posted November 17, 2020 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 🙂 2 Link to comment Share on other sites More sharing options...
akapowl Posted November 17, 2020 Share Posted November 17, 2020 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 5 Link to comment Share on other sites More sharing options...
andsavu Posted November 17, 2020 Author Share Posted November 17, 2020 @noviedo, @akapowl Cheers guys! Thanks a lot for the help, exactly what I was looking for :). Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now