GSAP ScrollTrigger, Draggable Help Needed

[stevejcoates]

Hi,

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

[mvaneijgen]

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! 

 

 

[stevejcoates]

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.

TIA

-Steve

 

...

[Rodrigo]

Hi,

 

Maybe this example can provide some inspiration:

See the Pen jOezPLN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[stevejcoates]

Hmm.. I don't believe so. It seems like that's working on fixed widths.

Basically, all I'm looking for is to be able to scroll the container to the start of the specified ID. I'm not sure how though. Any ideas much appreciated!

 

[stevejcoates]

Thank you for your help. I've managed to find a solution for this and updated the codepen above.