Jump to content
Search Community

GSAP ScrollTrigger, Draggable Help Needed

stevejcoates test
Moderator Tag

Go to solution Solved by stevejcoates,

Recommended Posts


I'm wondering if you could help with this horizontal scroller that I'm trying to create.

Essentially, the user should be able to scroll up/down and it move them sideways (working). If they drag the bar at the bottom it should scroll (working sort of). However, it seems as though you can drag to the left into negative values and then it appears to be broken as you have to scroll for a long time before it scrolls.

Also, the 'scroll bar' at the bottom is a bit hacky in that it has pointer events none and you're actually dragging the .scroller-container. I wonder if this could be done properly somehow?

I also have the option to click on the line behind the 'scroll' element and that would scroll them to the relevant point which is sort of working.

Hopefully you can get an idea of what I'm trying to achieve. Any help would be much much appreciated!

See the Pen mdzYLOb by stevejcoates (@stevejcoates) on CodePen

Link to comment
Share on other sites

Hi @stevejcoates welcome to the forum! 


Here is a topic with a similar issue and a lot of info on how to go about it. You'll have to map the scroll distance to the max and the min of the scroll label. Also in that post there is the issue of the label being updated by ScrollTrigger and the label is updating ScrollTrigger, this will create a feedback look which is not possible, my suggestion was to create two labels. One that is draggable and one which is scrollable and switch between them when doing one or the other function. Hope it helps and happy tweening! 



  • Like 1
Link to comment
Share on other sites

Hey mvaneijgen,

Thanks so much for coming back to me. This is really helpful. Using that example, is it then possible to have an anchor link that scrolls to a certain ID?

I set up a fok here. The element with an ID of #test is red and there's a link to it in the title:

See the Pen NWOVerr by stevejcoates (@stevejcoates) on CodePen

I just can't figure out how to get it to scroll to this element. I've tried multiple methods but no luck and I'm out of ideas.





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...