Jump to content
Search Community

stop previous tween on startdrag

ppdc test
Moderator Tag

Go to solution Solved by Diaco,

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

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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});
  • Like 3
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.
×
×
  • Create New...