Help making a div drag with the mouse but also rotate to follow the mouse direction

[Antdev]

Hello

I am trying to achieve something like this: https://asgordon.github.io/rotodrag-js/

I am creating a table top touch screen app and users can approach the table from any angle and select an element of the app to open a modal.

As I have no idea which side of the table the user is facing I have no idea which orientation to use for the modal.

Hence I would like it so if the user drags the modal towards them it orientates based on the angle the finger is dragging.

 

I would like the modal to stick to the finger similar to how it does in the link above.

 

I have seen an old example using gsap from 2015 but the draggable does not appear to stick to the finger and tends to drift off. 

 

Has anyone got an example of this functionality working with gsap?

 

I had implemented dragging and rotating separately like this 

See the Pen jOagBVq by antdev (@antdev) on CodePen

But I would much prefer the functionality of the rotodrag example above.

 

Edited to add, I have just found this example but it doesn't use Draggable. I need this to work so when you drag the modal it moves and rotates.

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

 

Thanks

 

Anthony

See the Pen KwbxNX by osublake (@osublake) on CodePen

[OSUblake]

Hi Antdev,

 

To get Draggable to behave like rotodrag would require a bunch of work. It's not a simple as the fish example as the transform origin has to be recalculated on every press, which is not trivial. We'd of course like you to use our tools, but maybe it would be better to use rotodrag if already has the functionality you need.

 

[Antdev]

Thank you OSUblake for your reply.

I obviously would much prefer to use gsap as my solution rather than an obscure library. I need to combine this functionality with other gsap functionality so it would have been great if this was something simpler out of the tin.

 

I am curious what you mean about the transform origin needing to be calculated on every press. Surely there would only be one press where the user presses down on the modal then it would behave like the fish as the user drags the modal? I am sure I am misunderstanding you here so apologies for being dumb.

[OSUblake]

59 minutes ago, Antdev said:

I am curious what you mean about the transform origin needing to be calculated on every press.

 

Look at the rotodrag demo and how it rotates around the point where you first click. That's the transform origin that has be recalculated on every click. Changing the transform origin when an element has transforms applied will make it jump. Changing the transform origin with SVG might be a little easier with GSAP, but this is still not trivial.   

 

You can see how it doesn't behave properly with the default transform origin of the center. The closer to the center you click, the better it will look.

 

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

 

[GreenSock]

There's a helper function that'll let you change the transformOrigin without a jump

https://greensock.com/docs/v3/HelperFunctions#transformOrigin

[Antdev]

Thank you - that makes sense now about needing to change the transformOrigin every time the user clicks on the modal.

 

What if the modal had a small area that was effectively the "trigger" which was the only area the user could drag the modal with.  Would that make the task of using draggable simpler to achieve this?

 

For example the white square in this codepen (that does not work in the slightest btw)

See the Pen rNpMpod by antdev (@antdev) on CodePen

[OSUblake]

2 hours ago, Antdev said:

Would that make the task of using draggable simpler to achieve this?

 

Maybe a little, but it's still going to need some finessing just like that article mentions like with small movements. Just play around with the demo I posted above.

 

[Antdev]

Thanks OSUblake  - I will have a play around and update this thread if I have any success