Jump to content
Search Community

Change Draggable maxDuration after setup?

martis 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

You could create a function that creates the draggable instance, then when you need to change the duration of the throw, call that function in order to kill the instance and create it again with the new parameters:

var myDrag;

function createDraggable(maxDurationParam)
{
  myDrag = Draggable.create(myElement,
  {
    type:'x,y',
    throwProps:true,
    maxDuration:maxDurationParam
  });
}

//create the original draggable instance
createDraggable(value);

//on click event change the maxDuration
button.click(function()
{
  myDrag[0].kill();
  
  createDraggable(newValue);
});

See the Pen jAins by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Mhh, that's a tricky one.

 

You could try accessing the throw tween and change its duration using duration():

function createDraggable(maxDurationParam)
{
  myDraggable = Draggable.create(".box",
  {
		bounds:"#demo",
		edgeResistance:0.65,
		type:"x,y",
		throwProps:true,
    maxDuration: maxDurationParam,
    // access the throw tween and update it's duration
    onDragEnd:function()
    {
      this.tween.duration(new_value);
    }
  })
}

Also you could attach this to any other event handler, but I'd recommend onDragEnd.

 

Rodrigo.

Link to comment
Share on other sites

Anytime, Rodrigo. The "vars" object is basically what you pass into the constructor, like:

var vars = {type:"x,y", maxDuration:3, edgeResistance:0.5};
var draggables = Draggable.create(".box", vars);
console.log( draggables[0].vars.maxDuration ); //3
console.log( draggables[0].vars === vars) ); //true

When the tween is created, it looks at that vars object for the maxDuration (if one is defined). 

 

Is that what you were asking?

  • Like 1
Link to comment
Share on other sites

Thanks Jack.

 

Actually what I meant is when, during the progression of events in the draggable instance, the throwProps tween is created.

 

For example you click on an element, then you move the cursor/finger more than 3 pixels, at that point onDragStart will be triggered, if defined. While you drag the element the onDrag event will be triggered. When you release the mouse button/touch event, the onDragEnd event will trigger. When exactly the throwProps tween is created?, right before calling the onDragEnd?, some milliseconds after, before?.

 

I was wondering in order to know when the duration change should be applied in this specific case. I suggested onDragEnd, because using a console.log in that particular callback I found the tween duration. I just wanted to know if there's a better moment to do so. Of course if the answer is too complicated we can leave it here, no need to go into too much trouble.

 

Sorry for not elaborating the question properly the first time.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Ah, I see. Yes, the tween gets instantiated almost immediately BEFORE the onDragEnd is triggered. That's purposeful so that everything internally is done (including the creation of the tween) and you can do things in your onDragEnd like grab the tween instance (or whatever). If I create the tween AFTER the onDragEnd, that could be annoying for folks who want to access that immediately when the drag ends. See what I mean? 

 

So if you're going to tweak the maxDuration, do it anytime before the drag ends. :) Or, as you suggested earlier, just grab the tween instance and alter its duration() directly. 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Hey guys,

 

I ended up using this solution, since I wanted to track if the snap was moving forward or backwards... works pretty well, would love any input on how I could improve/optimize!

// Setup Draggable
function setupDraggable() {
	
	TweenMax.set($proxy, {css:{height:Math.round(tl.totalDuration() * pixelScroll) + $window.height() + "px"}});
	TweenMax.set($proxy, {css:{visibility:"hidden"}});
				
	drag = Draggable.create('#proxy', {
		type:"y", 
		bounds:$('#proxyContainer'),
		trigger:$('#site'),
		force3D:true,
		dragClickables:false,
		zIndexBoost:false,
		edgeResistance:.8,
		dragResistance:.1, 
		throwProps:true,
		minDuration:2.5,
		maxDuration:4,
		overshootTolerance:0,
		snap: {
		    y: function(endValue) {
		      if (!snapping) {
		      
		      	console.log("snap");
		      	
		        snapping = true;
		              
		        var lastEndValue = snapPoints[snapIndex];
		        
		        if (endValue < lastEndValue+10 && snapIndex < snapPoints.length-1) {
		         
		        				          
		          snapForward = true;
		          snapIndex++;
		          
		        } else if (endValue > lastEndValue-10 && snapIndex > 0) {
		        
		          snapForward = false;  
		          snapIndex--;
		        }
		      }
		      
		      return snapPoints[snapIndex];
			  }
		},
		  
		onDragStart:function() {
	    	snapping = false;
		},
		
		onDragEnd:function() {
			
			
			if(snapForward == true) {
				drag.vars.minDuration = 4;
		        drag.vars.maxDuration = 6;

			} else {
				drag.vars.minDuration = 1;
		        drag.vars.maxDuration = 3;
			}
			
			if(this.tween.duration() < drag.vars.minDuration) {
				this.tween.duration(drag.vars.minDuration);
			}
			
			if(this.tween.duration() > drag.vars.maxDuration) {
				this.tween.duration(drag.vars.maxDuration);
			}
			
			
			console.log("end");
			console.log("max: " + drag.vars.maxDuration);
		        console.log("min: " + drag.vars.minDuration);
			console.log("snapForward: " + snapForward);
			console.log("duration: " + this.tween.duration());

	    	snapping = false;
		},
	
		onDrag:function () {
			processMobileTimeline(this.y); 
			
		}, 
						
		onThrowUpdate:function() {
			processMobileTimeline(this.y); 		
		}	
	})[0];
	
}
Link to comment
Share on other sites

Hi,

 

Nice code and thanks for sharing the solution.

 

The only thing is that by default Draggable uses force3D:true, so there's no need to add that line, beyond that it seems ok to me, although is always better a working sample. If is working ok for you then is fine I guess.

 

Happy Tweening!!

Link to comment
Share on other sites

Thanks Rhernando,

 

I am running into one issue where I drag the draggable to the final snap spot.

 

I swipe up again, but it snaps DOWN the snapIndex (I basically want it to not do anything).

 

Tried looking at the math, can't figure out why the endValue is now less (is it because its at its max Y position)?

Link to comment
Share on other sites

You're welcome.

 

Could you create a simple reduce example by forking the following codepen?

 

See the Pen HjfsK by GreenSock (@GreenSock) on CodePen

 

It has everything you need: TweenMax, Draggable and ThrowProps Plugin.

 

Also see this post in order to find a little more about creating samples in codepen:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

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...