Hi there, this is my first post so hopefully I'm in the right place.
I've recently started using GSAP Draggable to create draggable/scrollable sections on a website I'm working on.
I have 3 elements per instance, a scroll bar, which houses the draggable scroll handle, and a corresponding scroll container which slides left and right as the handle is dragged to reveal more inner items.
I got it working the way I wanted and everything seemed to be going well until I tried to scale it up to easily include multiple instances.
This issue I'm facing is that while each of the draggable scroll bars seem to work as expected (in that dragging the handle of one does not move the handle of any of the others), however the scroll container that they correspond with seems to be overwritten recursively so that all handles affect only the final container rather than the container they are paired with.
I assume by issue is with my draggable.create and would appreciate any help.
I've provided my code below:
gsap.registerPlugin(Draggable);
$( window ).on( 'resize load', function( e ) {
$('.draggable-group-scroll-handle').each(function(){
scrollGroupID = $(this).attr( 'data-draggable-id' );
scrollHandle = $( '#draggable-' + scrollGroupID );
scrollBar = $( '#draggable-bar-' + scrollGroupID );
scrollGroup = $( '#' + scrollGroupID );
scrollGroupWidth = scrollGroup.width();
scrollMax = 0;
$(scrollGroup).children().each(function () { scrollMax = scrollMax + $(this).outerWidth(); });
scrollMax = scrollMax - scrollGroupWidth;
maxScroll = scrollBar.outerWidth();
barLength = maxScroll - scrollHandle.outerWidth();
barDifference = scrollMax / maxScroll;
Draggable.create(scrollHandle, {
type: 'x',
bounds: scrollBar,
throwProps: true,
onDrag:function() {
gsap.to(scrollGroup, {x: (-this.x / barLength * maxScroll) * barDifference});
}
});
Draggable.get(scrollHandle).update();
});
});
Thanks!
