stop previous tween on startdrag

[ppdc 2 Likes (Newbie)]

Hi,

is there a way to clear the existing draggable tween onStartDrag or onPress?

I get a small hickup when the draggable reaches the last snap-position and a user tries to drag past this position while there's already a draggable tween running. What happens is, it tweens to the previous snap-position. Setting the edgeResistance to 0 did not help, either.

 

So I'm trying to find out if there is a tween running and to clear that before the new Drag is initiated.

 

Thank you.

 

Peter

See the Pen tpGHI by ppdc (@ppdc) on CodePen

[GreenSock 18,267 Likes (Superhero)]

Hm, I played with your codepen briefly and couldn't replicate any odd glitches (I kept flicking and grabbing it before it finished tweening...no odd behavior from what I could tell). Draggable automatically kills any conflicting tweens internally - it takes care of all that for you so you don't have to worry about it. 

[Jonathan 5,389 Likes (Superhero)]

When i was testing i could not see the hiccup you described either. I just saw ThrowProps work as expected..

 

I tested on PC Windows 7 (64-bit) .. in Firefox 33 and Chrome 37

 

What OS, OS version and browser did you test this on?

[ppdc 2 Likes (Newbie)]

Hi there, and sorry for the late reply, I wasn't alerted of your answers and busy with other stuff.

However, I can still replicate the error with both Safari 8 and Chrome 38 on MacOS 10.9 / 10.10. but also with Chrome and IE 10 running on an (emulated) Windows 7.

I made a little screencast: https://vimeo.com/109796603

 

It seems to happen when you drag while the previous tween is in it's 'back' movement (I'm using easeOut.Back).

 

Thank you

[Diaco 1,995 Likes (Superhero)]

Hi ppdc 

 

it seems your bounds is cause of that behavior , so try this :

 

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

Draggable.create("#dragContainer",{
  type:"x",  
  dragResistance:0.1,
  edgeResistance:0.5,
  bounds:{minX:-1200, maxX:0},
  ease:Back.easeOut,
  maxDuration:0.8, 
  throwProps:true, 
  snap: function(endValue) {
  var step = 400;
  return Math.round( endValue / step) * step;
  },
  dragClickables:true});

[ppdc 2 Likes (Newbie)]

Works perfectly, thanks a lot!