qvstudio Posted January 11, 2022 Share Posted January 11, 2022 Hi there, I am trying to implement a draggable horizontal scrolling section with, but the rest of the page should remain vertical scroll. Can't figure out where it goes wrong. The yellow section is supposed to be horizontal with draggable option See the Pen KKXGBXv by qwertmedia (@qwertmedia) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 11, 2022 Share Posted January 11, 2022 Hey there! You're targeting 'section' elements to do the horizontal scroll, but you've got loads of 'section' elements outside of that wrapper. const sections = gsap.utils.toArray("section"); You'll need to be more specific about the elements you're targeting. Your CSS is also not laying the sections out correctly. My advice is always to isolate the issue, fix and then re-integrate. Here's a step in the right direction. ✨ See the Pen jOGevrK?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
qvstudio Posted January 11, 2022 Author Share Posted January 11, 2022 Hi @Cassie thanks for your reply and suggestion, tried to implement it, but for some reason the horizontal section, won't drag horizontal. When I grap the grey section the page moves up and down. Code also says: 'var drag is declared but its value is never read' Link to comment Share on other sites More sharing options...
Cassie Posted January 11, 2022 Share Posted January 11, 2022 I can't help without a demo I'm afraid! If I were you I would try implementing it bit by bit. Get the horizontal scroll working first, then add the code to handle the drag. If it's possible to remove other animations while you're testing the functionality then do so. Link to comment Share on other sites More sharing options...
qvstudio Posted January 11, 2022 Author Share Posted January 11, 2022 Here's the demo: See the Pen MWEPMeo by qwertmedia (@qwertmedia) on CodePen with the overflow-x visible I'am able to scroll horizontal, but when i try to 'grab' it's acting buggy Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2022 Share Posted January 12, 2022 Hi @qvstudio. Unfortunately LocomotiveScroll is not a GreenSock product and we can't support it here. I have definitely seen some odd behavior with it, but I'm really not terribly familiar with it so perhaps I'm misunderstanding some things. Confidentially, we are working on something that may make this much easier for you - it's a tool that'll only be available to "Shockingly Green" and "Business Green" Club GreenSock members. If you'd like early access, you're welcome to sign up and request that. No pressure, though. I really wish there was more we could do to help, but this looks like a LocomotiveScroll issue. If you believe that isn't the case, please provide a minimal demo that doesn't use LocomotiveScroll and still shows the problem and we'd be happy to take a peek. Link to comment Share on other sites More sharing options...
qvstudio Posted January 12, 2022 Author Share Posted January 12, 2022 Hi Thanks again, hereby a minimal demo: See the Pen MWEPMeo by qwertmedia (@qwertmedia) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2022 Share Posted January 12, 2022 That looks like pretty much the same demo, and it's still using LocomotiveScroll. You looked for ".section" but there are no such elements. I assume you meant ".box". Like I said, we cannot support 3rd party libraries in these free forums. If I remove LocomotiveScroll, it works as expected: See the Pen mdBQvrX?editors=0110 by GreenSock (@GreenSock) on CodePen 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