Jump to content
Search Community

Click test distance

eliajf test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a way to change the click test from 3px to something greater? I'm finding in Android browsers that a Draggable object is hard to click because it has a tendency to move a very short distance when I tap the field. On most mobile browsers, 3px is extemely tiny because of retina displays, thus a larger pixel range would be beneficial.

Link to comment
Share on other sites

  • 4 weeks later...

That is SUPER useful. When is this expected to be released?

Is there away to lock it on the x or y axis? Here is what I currently have, and works perfectly when I drag left and right. But the state change also happens when I swipe up and down.

Draggable.create( $this, {
    type            : 'x',
    edgeResistance  : 0.2,
    throwProps      : true,
    minimumMovement : 100,
    lockAxis        : true,
    maxDuration     : 0.5,
    bounds          : { minX : -gridWidth, maxX : gridWidth },
    onDragEnd : function ( e ) {
        target = e.target;
        current = ( current < childLength - 1 ) ? ++current : 0;
        updateHero( target );
        updateHeroText( target, current );
    },
    onThrowComplete : function () {
        TweenLite.set( $this, { clearProps : "transform, z-index" } );
        resetText( target );
    }
}
Link to comment
Share on other sites

Hi jermbo  :)

 

that's already included , pls download the last version of GSAP (1.15.1 )

 

minimumMovement special property to Draggable (set in the config object) that defines the minimum distance that the mouse/touch must move before being interpreted as a drag. Default is 2.
 
for now you can use something like this :
var elX;
Draggable.create(".knob",{
type:"x",
minimumMovement :50 , 
onPress:function(){ elX=this.x },
onDrag:function(){ 
if( this.x>elX || this.x<elX ){
  // your function.....
}}
});
pls check this out : 

See the Pen bNYRed by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you all. I apologize about disappearing as I thought no one responded since I didn't get any notification of a response. I downloaded 1.15/0.11. This will make a huge difference for mobile devices which seem to be more sensitive than desktop ones.

Link to comment
Share on other sites

  • 3 weeks later...

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.
×
×
  • Create New...