Jump to content


Locomotive scroll + horizontal scrolling section issue

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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.