Jump to content
GreenSock

martis

Set overshootTolerance on Draggable with snapping/minDuration/throwProps

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

Hey guys,

 

Is there a simple way in the Draggable config to set overshootTolerance to 0?

 

I have snapping, minDuration, and throwProps on and don't want my object to overshoot the target.

 

Thanks!

Link to comment
Share on other sites

In order to control the overshootTolerance you will have to construct your own ThrowPropsPlugin.to() tween in the Draggable's onDragEnd callback.

 

Take a look at the ThrowPropsPlugin docs:

http://api.greensock.com/js/com/greensock/plugins/ThrowPropsPlugin.html

 

The first 2 code examples illustrate how this is done with Draggable.

 

Instead of using the Draggable's config's minDuration and snap you will want to configure those values in the custom tween you create using onDragEnd

  • Like 2
Link to comment
Share on other sites

Thanks Carl,

 

Any clue where I can find the default throwProps config? I literally only want to change the overshootTolerance :)

 

Here is my current code:

drag = Draggable.create('#proxy', {
	type:"y", 
	bounds:$('#proxyContainer'),
	trigger:$('#site'),
	force3D:true,
	dragClickables:false,
	zIndexBoost:false,
	edgeResistance:.8,
	dragResistance:.5, 
	throwProps:true,
	minDuration:.75,
	snap: {
	    y: function(endValue) {
	      if (!snapping) {
	        snapping = true;
	        var lastEndValue = snapPoints[snapIndex];
	
	        if (endValue < lastEndValue+56 && snapIndex < snapPoints.length-1) {
	          snapIndex++;
	        } else if (endValue > lastEndValue-56 && snapIndex > 0) {
	          snapIndex--;
	        }
	      }
	      
	      return snapPoints[snapIndex];
		  }
	},
	  
	onDragStart:function() {
    	snapping = false;
	},
	
	onDragEnd:function() {
    	snapping = false;
	},

	onDrag:function () {
		processMobileTimeline(this.y); 
		
	}, 
					
	onThrowUpdate:function() {
		processMobileTimeline(this.y); 		
	}	
})[0];

Link to comment
Share on other sites

The overshoot thing is a tricky one physics-wise because if something starts out at a certain velocity and you force it to end at a particular spot that’s adequately short, there MUST either be overshooting or the ease must be adjusted (but you're already defining a specific ease in the tween). Imagine a car going 100mph and you say “I want you to take 10 seconds to stop, and end in exactly 1 inch from where you’re at now, using this specific easing equation”. Um…can’t happen unless the initial velocity is suddenly jerked to a different value. 

 

That being said, we have practical realities to contend with, and I don't think you're as concerned about the initial velocity exactly matching as much as you are that the overshooting is prevented (right?). Therefore, I've tweaked the algorithms in ThrowPropsPlugin so that they recognize an overshootTolerance of 0 as a special case, and adjust the initial velocity accordingly to prevent overshooting. I just e-mailed the new plugin file to you - would you mind giving that a shot and letting us know if it works well for you? All you'd need to do is drop that into place and make sure you set overshootTolerance to 0 on your Draggable config object.

Link to comment
Share on other sites

Nice work Jack!

 

That seemed to of killed any sort of overshooting while using my custom snapping with overshootTolerance:0 !

  • Like 1
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.
×