Antdev Posted April 23, 2022 Share Posted April 23, 2022 I am creating an app to be used at an exhibition on a touch screen PC and using gsap Draggable. All was working fine on my desktop PC (Windows 10 | Chrome) with mouse and normal monitor. This app will allow multiple users - each dragging different elements. However when I hooked up a touch screen monitor I have discovered if I touch the draggable element with 2 fingers - it behaves erratically (jumps around) which is not going to be acceptable so I need to work out my options. Do I remove gsap Draggable and try another library such as HammerJS or InteractJS in the hope they will place nicely with multitouch. Or is there a code solution where I can prevent this multitouch issue and just ensure it works fine no matter how many fingers touch the draggable element but only act on one of these fingers (hope that makes sense) I don't think a hardware solution is on the cards. Thanks Ant p.s I have not included a codepen as assume peeps won't have a PC touch screen to test on. I am pretty sure the same issue happens with the Draggable demos Link to comment Share on other sites More sharing options...
Cassie Posted April 23, 2022 Share Posted April 23, 2022 Hey there! This thread may be useful - or this one? Link to comment Share on other sites More sharing options...
Antdev Posted April 23, 2022 Author Share Posted April 23, 2022 Hey Cassie, you have come to my rescue again - thank you. I will give this a go and report back shortly. 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 23, 2022 Share Posted April 23, 2022 Sorry I can't help any more than this - I'm not super hot on the ins and outs of Draggable. If it doesn't help, Blake will be around later on today. 1 Link to comment Share on other sites More sharing options...
Antdev Posted April 23, 2022 Author Share Posted April 23, 2022 No problem at all. I am impressed enough that you are responding on a Saturday morning. I am glad I am not the only one working on Saturday 1 Link to comment Share on other sites More sharing options...
Antdev Posted April 23, 2022 Author Share Posted April 23, 2022 (edited) Update to say I tried the solutions suggested in the threads you kindly shared. Unfortunately these suggestions did not resolve the issues. I did test the gsap Draggable demo ( See the Pen ALgdjV?editors=1010 by GreenSock (@GreenSock) on CodePen ) on my touch screen monitor and experienced the same issue. Just to clarify, on the Throw demo, to replicate the issue, simply place one finger on the left hand side of the draggable and another finger on the right hand side - the draggable jumps from left to right probably from one finger to the next and back again etc. I will give Interact JS a go as I do ultimately need to add rotation and possibly some pinching to scale the modals too so I think I would struggle with gsap for this though I could consider just adding buttons to my modals that the user presses to rotate 90 degrees at a time or to scale up and down between 2 values but I would need to crack this issue with the draggable jumping between the two fingers and then just flying off. Just in case it is helpful, my draggable code is as follows: Draggable.create(".modal', { type:"x,y", edgeResistance:0.7, inertia: true }); Edited April 23, 2022 by Antdev added more info Link to comment Share on other sites More sharing options...
Cassie Posted April 23, 2022 Share Posted April 23, 2022 Yeah, I think if you need serious gesture support then hammer.js or something mixed with GSAP is probably a good plan! Link to comment Share on other sites More sharing options...
Solution Cassie Posted April 23, 2022 Solution Share Posted April 23, 2022 Just checking, because that demo you posted has a lot going on. This isn't working for you?https://cdpn.io/pen/debug/vYpMbgv <--- debug link for testing 1 Link to comment Share on other sites More sharing options...
Antdev Posted April 23, 2022 Author Share Posted April 23, 2022 Hey Cassie that link you just posted appears to be behaving! I even added a few more draggbles into the mix and still behaving. Oh fab, that means I could at least use a gsap only solution if the client is happy with rotation and scale via a button. Thank you so much Cassie. 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 23, 2022 Share Posted April 23, 2022 Ah excellent! Glad we got there! For anyone else dropping by - it's the solution from this thread 1 Link to comment Share on other sites More sharing options...
Antdev Posted April 23, 2022 Author Share Posted April 23, 2022 2 hours ago, Cassie said: Yeah, I think if you need serious gesture support then hammer.js or something mixed with GSAP is probably a good plan! It would be awesome if you could add multi-touch functionality to Draggable to prevent the need to use Interact JS or Hammer JS - appreciate this is a big ask and the target audience for touch screen apps may not be big enough to justify the development time - however I was always told if you don't ask, you don't get so I am asking Link to comment Share on other sites More sharing options...
Antdev Posted April 24, 2022 Author Share Posted April 24, 2022 Just in case it is useful to anyone else, I have managed to get gsap and InteractJS playing nicely together to enable rotating and dragging with gsap taking care of the setting the properties. interact(modal) .gesturable({ listeners: { start (event) { angleScale.angle -= event.angle }, move (event) { let currentAngle = event.angle + angleScale.angle; let currentScale = event.scale * angleScale.scale; gsap.set(event.target, {rotation:currentAngle}); gsap.set(event.target, {x:'+=' + event.dx}); gsap.set(event.target, {y:'+=' + event.dy}); }, end (event) { angleScale.angle = angleScale.angle + event.angle angleScale.scale = angleScale.scale * event.scale } } }); 1 Link to comment Share on other sites More sharing options...
Antdev Posted May 20, 2022 Author Share Posted May 20, 2022 Just to update, InteractJS didn't turn out to be a good solution for the multitouch - there is a known issue where a finger on the screen breaks all other interactions. So I have aborted using that. 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