Help with Nested Draggable in GSAP

[EntropyReversed]

I'm experiencing an issue where nested Draggable elements have incorrect autoScroll behavior when the parent Draggable is moved.
I've created an example on CodeSandbox with a brief explanation of how to reproduce the problem.
I'm unsure of the best way to update the inner Draggable elements when the parent Draggable moves. codesandbox link

[Rodrigo]

Hi @EntropyReversed and welcome to the GSAP Forums!

 

Makes perfect sense. If you use the middle button what you are actually doing is dragging the .wrapper-inner element in the X/Y axis, that means the element at all it's children are moved, because of that transform that is applied by that particular Draggable instance. If you drag the parent element and inspect the scrollTop property of the .wrapper-inner element is 0, so if you drag one of the boxes down in order to scroll down, then up to the top and check the scrollTop property, again is 0. This is because the .wrapper-inner element that has been moved, Draggable is taking the scroll to 0, 0 (top, left), but the boxes/nodes Draggable instances can't account for the transform applied to their parent element by a different Draggable instance.

 

If you want to achieve that you might have to create your own custom logic in order to account for that particular transform and update the Draggable instance of the parent element as well, but right at the top of mi mind this doesn't sound like a simple task.

 

Hopefully this clear things up

Happy Tweening!