Need double click on draggable to fire function

[marshall_henhawke]

Thanks for the amazing library. I've been using it a long time and recently bought the plugins to show how much I appreciate it. I ran into an issue today that I'm a little confused about. I'm  new to Draggable and I'm trying to create an off canvas menu that when opened with a button, takes up 80% of the screen width. The user can drag to close the menu on either the menu itself or the 20% gap to the right. I have this part working.

 

The problem is when I try to make it so the user can click the 20% gap to be able to close the menu without dragging it. On the desktop this works fine how I have it set up, but on mobile I have to tap the area twice to get the draggable onClick to fire.

 

Here is a code sandbox showing this. Try on desktop clicking the blue section when the menu is open. It should close with one click. But on mobile, you have to tap first then tap again.

 

https://codesandbox.io/s/vue-gsap-zvrzyo?file=/src/App.vue

 

Any insight as to what I could do better and why this isn't working would be much appreciated!

[GreenSock]

I think the main issue may actually be that you're switching between px and % on the "x" transform of the Draggable element and you have px-based bounds defined. Draggable is px-based, but then you're tweening the x transform to "100%" and "0%" outside of Draggable which messes with the units. I would recommend animating to window.innerWidth instead of "100%" and 0 instead of "0%". I'll add some extra code to the next release of Draggable to force the unit back to px onPress. 

 

2 hours ago, marshall_henhawke said:

Thanks for the amazing library. I've been using it a long time and recently bought the plugins to show how much I appreciate it.

That's super cool of you, thanks! 💚

[marshall_henhawke]

On 8/26/2022 at 12:18 AM, GreenSock said:

Draggable is px-based, but then you're tweening the x transform to "100%" and "0%" outside of Draggable which messes with the units. I would recommend animating to window.innerWidth instead of "100%" and 0 instead of "0%".

Thanks so much, this was the issue!