Controlling the drag position of an element that's already controlled via another element's scroll position

[AaronRF]

Hello!

 

Looking at the CodePen example, you can see that the position of the #slidingElement div is controlled with a draggable div (#DragItem). This is working beautifully but I've just learnt that #slidingElement itself should also be draggable, meaning that the progress of both the #slidingElement and #DragItem position need to be tracked and tied together accordingly. I tried to implement similar functionality for the #slidingElement as I did with #DragItem  but the functionality falls apart and they conflict with each other.

 

I've stripped it back to a usable state for the time being but

 

I hope this makes sense, I'm not 100% sure how I can go about achieving this and was hoping someone could shed some light on where I can go from here.

 

Many thanks,

Aaron

See the Pen xxejJdd by AaronRF (@AaronRF) on CodePen

[Rodrigo]

Hi,

 

Your demo has only one Draggable instance. You can definitely control the position of one Draggable instance with another Draggable instance. You can update the other Draggable instance using the update method:

https://gsap.com/docs/v3/Plugins/Draggable/update()

 

Hopefully this helps.

Happy Tweening!

[AaronRF]

Thanks @Rodrigo, I'll give this a try!

[Rodrigo]

Hi,

 

Well I couldn't resist to create a simple demo of this, super fun!:

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

 

The magic numbers you see there are because:

• The width of the wrapper is 80% the screen width.
• The wrapper for the box has a 10 px padding on the left/right
• The box element has a fixed width of 75px

 

Hopefully this helps.

Happy Tweening!

[AaronRF]

@Rodrigo Sorry for the late reply! That's awesome, thanks for taking the time to make the example, it seems I was over complicating things for myself as usual 😄