[Help with multiple instances of GSAP Draggable]

Wow this is great! I'm still something of a novice when it comes to JS/Jquery so I'm going to dig through the examples this evening as see if i can get my head around your suggestions.

 

Thanks again!

[Help with multiple instances of GSAP Draggable]

Hi @Cassie here is the demo as requested 

See the Pen xxPOQEo by ConalBirtles (@ConalBirtles) on CodePen

 

The bottom one works as I want but the 2 proceeding it don't.

 

@_Greg _ Absolutelly, I agree. That was just something I had on while I was testing. My next port of call would be to only run the Draggable update at the end of a resize or delayed on some form of throttling. Thanks for the tip!

[Help with multiple instances of GSAP Draggable]

Hi @Cassie, sure I'll get on that now!

[Help with multiple instances of GSAP Draggable]

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!