Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ukk53

GSAP Draggable Plugin - Issues with dragClickables in touchscreen

Go to solution Solved by GreenSock,

Recommended Posts

So, I'm currently building an animated div container for my app but in doing so, I am encountering a bug, I suppose. As I did set thedragClickables to false in the Draggable.Create() object but the results of setting it to false is inconsistent on touch screen devices. If I elaborate the situation here, If I directly tap the container without dragging it initially the route is switched without any issues. However, when I drag the container and then tap the button it works sometimes and sometimes it doesn't. Tested it on iPhone 8, iPad and laptop touch screen

Any help is greatly appreciated.


PS: The codesandbox provided is a extremely scaled down version of my app. I do have other stuffs like react transition groups which I think shouldn't effect this issue. However if it's needed to be included I can do that as well.

 

Edit: It works flawlessly on desktop though. No issues there

 

CodeSandBox Link - https://codesandbox.io/s/keen-rhodes-f0r55?file=/src/index.js:0-231

Link to comment
Share on other sites

Is there any particular reason you think this is Draggable-related? Have you tried removing Draggable from the equation, applying inline transforms to rotate the container (like you're doing with GSAP) and seeing if the click works as you'd expect? I'll look into it as soon as I can. 

Link to comment
Share on other sites

4 hours ago, GreenSock said:

Is there any particular reason you think this is Draggable-related? Have you tried removing Draggable from the equation, applying inline transforms to rotate the container (like you're doing with GSAP) and seeing if the click works as you'd expect? I'll look into it as soon as I can. 

Umm.. Yes, I did remove Draggable and tried it and it worked flawlessly but as soon as I add Draggable again it starts to bug in touchscreen devices. How to do the inline css transforms work with gsap draggable? using the onPress property?

Anyhow, I'm trying out different stuffs removing few properties that I think is causing the issue. I'll edit and keep this reply updated as I debug more into it..

 

Thank you for your help! :)


Edit: I removed almost everything from the config object for
Draggable and the issue still persists.
Here was to config:
 

Draggable.create(cardRef.current, {
      type: "x,y",
      dragClickables: false
    });
  }

I'm guessing it's a bug as it's working with mouse clicks and unresponsive with touches. Not entirely sure about it though, as I might be missing something.

Link to comment
Share on other sites

On 12/19/2020 at 9:58 AM, GreenSock said:

Aha! I think I found the issue and it should be fixed in the next release which you can preview at https://assets.codepen.io/16327/Draggable3.min.js - does that file work better for you? 

 

Sorry about any confusion that caused.

Thank You very much for promptly fixing the issue, However is there anyway I can implement this version of Draggable in React right now? As I have to ship my current project in a week or two from now.

I did try to override the npm installed gsap draggable by using script tag at the end of the body tag, but it didn't work as I intended it to work. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×