Antdev Posted March 22, 2022 Share Posted March 22, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted March 22, 2022 Share Posted March 22, 2022 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. Link to comment Share on other sites More sharing options...
Antdev Posted March 22, 2022 Author Share Posted March 22, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted March 22, 2022 Share Posted March 22, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 22, 2022 Share Posted March 22, 2022 There's a helper function that'll let you change the transformOrigin without a jump https://greensock.com/docs/v3/HelperFunctions#transformOrigin Link to comment Share on other sites More sharing options...
Antdev Posted March 23, 2022 Author Share Posted March 23, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted March 23, 2022 Share Posted March 23, 2022 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. Link to comment Share on other sites More sharing options...
Antdev Posted March 23, 2022 Author Share Posted March 23, 2022 Thanks OSUblake - I will have a play around and update this thread if I have any success 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now