How to detect if i'm dragging up or down??

[celopez16]

Hi, I'd like to know how to detect if i'm dragging up or down, do you know if there's a way to do it? Thanks

[PointC]

Hi celopez16 

 

Welcome to the GreenSock forums.

 

Draggable's getDirection() method can take care of that for you:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/getDirection/

 

Happy tweening.

[celopez16]

PointC Thank you!!

[celopez16]

PointC I'd like to talk about another question, something a little bit weird, if you drag an element and you drag it fast, the actions that you execute in the "onDrag" event for example, behave different than if you drag slowly. I have a site where i use Draggable to zoom in or out a photo, in the event "onDrag" I increase the size depending on the direction of the element, but i notice that when I move it really fast, the size is smaller, but if I drag slowly, the image increases more. What could be going on here? Thanks

[Carl]

Hi Celopez,

 

Not sure I understand what you are experiencing.

It really helps if you can create a reduced test case using CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Also, questions can easily get overlooked if you follow up an already answered question with a new one. I imagine many of us saw that PointC answered your first question perfectly and didn't know that something new came in. The best thing is to put new questions in a new thread. No worries.

[PointC]

Yep - I missed this follow up question. 

 

I'm with Carl - I'm not sure I completely understand what you're describing. If we can get a look at your onDrag function, I'm sure we can point you in the right direction. Please let us know when you have a CodePen available. Thanks.

[celopez16]

Thanks PointC and Carl, is really simple y have a draggable element, like the zoom of google maps, I detect if the user is zooming in or zooming out, sp I use the getDirection() method, the funny thing is, for example if you have a counter in the onDrag event, the counter will end up with a low number, say (10) if you drag fast, but if you drag slow, the number may be 50, I hope it's clear (i dont know mucho about codepen) Thanks!:

Draggable.create("#eldrag",{

type: "y",

bounds: $("#labarra"),

onClick:function() {

 

},

onDragEnd:function() {

/*if(direccion=="up") TweenMax.to("#elscroll img", 0.3, {width:"200%"});

else TweenMax.to("#elscroll img", 0.3, {width:"70%"});*/

},

onDrag:function(){

w_contenedor=$('#zoom_photo').width();

porcent=($('#elscroll img').width() / w_contenedor) * 100

porcent=Math.ceil(porcent);

direccion=this.getDirection("velocity");

if(direccion=="up"){

if(porcent<200) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()+30 )});

}else{

if(porcent>=70) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()-30 )});

}

}

});

[OSUblake]

Why don't you take a look at this example. Just set whatever min and max values you want to use. I'm using scale, but you could use width if you wanted to.

See the Pen 4242b3be53fba428093ba873b7ec07af?editors=0010 by osublake (@osublake) on CodePen