Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
usheeen

Update snapping onDragEnd

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

Is it possible to set snapping onDragEnd?

 

I've tried...

onDragEnd: function(){
  if(this.endY < 100){
    draggable[0].vars.snap = function(){
      return 0;
    }
  }
}

and...

onDragEnd: function(){
  if(this.endY < 100){
    draggable[0].vars.snap = [0];
  }
}

but neither seems to work.

 

I'm guessing this is because the snapping tween is created before this point, any ideas?

 

Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.

Link to comment
Share on other sites

I got it working with both your examples, but CodePen is doing maintenance right now so I can't save. The only thing I changed is that I referenced the draggable using "this" instead of draggable[0]. How are you getting that value if your function is anonymous?

 

Also, wouldn't it be better to do that in the snap function since it will pass you the end value?

  • Like 2
Link to comment
Share on other sites

Blake beat me to it (which I love :) ). If I understand correctly, wouldn't your logic be better wrapped in a function? That way, you can use whatever logic you want on-the-fly. In other words, your "snap" would literally be a function. Here's an example from the docs:

Draggable.create("#yourID", {
   type:"rotation",
   throwProps:true,
   snap:function(endValue) {
//this function gets called by ThrowPropsPlugin when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, we'll just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
      return Math.round(endValue / 90) * 90;
   }
});

Is that what you're lookin' for? 

  • Like 1
Link to comment
Share on other sites

So I think I need to flesh out my example a bit more...

 

My dragEnd function is actually being called in a separate module. I'm sending an event from Draggable.onDrag and listening for it in this module. So perhaps the latency here is causing the problem, maybe the event is arriving a little too late for me to update the snapping in time.

 

I will put together a codepen shortly.

Link to comment
Share on other sites

Hi usheeen  :)

 

pls try this :

Draggable.create(".page", {
    type: "y",
    throwProps: true,
    onDrag: HeaderModule
});

function HeaderModule() {
   if(this.endY < 0 ){ this.vars.snap = [-100] } else { this.vars.snap = [0] }
};
Link to comment
Share on other sites

Thanks for your help so far, updated with your suggestion:

See the Pen vOLWJe by oisinlavery (@oisinlavery) on CodePen

 

Unfortunately, this doesn't seem to fix it, again the snapping doesn't become active until the next drag.

 

My main goal here is to decouple my main Page Draggable from whatever sub modules it might effect. In a way referencing the HeaderModule in the PageModule goes against this.

 

Also, it would be great if Draggable emitted events rather than having to hook up pub/sub myself. Has this ever been considered?

Link to comment
Share on other sites

you should to set snap points before the relese/onDragEnd . 

 

pls use onDrag instead of onDragEnd : 

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

  • Like 1
Link to comment
Share on other sites

That would be a great feature, and I have requested it. Voice your opinion here.

http://greensock.com/forums/topic/11545-event-tween-feature-request/?hl=events#entry47195

 

PubSub must be really slow, here's your demo using an event dispatcher I made.

See the Pen zGrPRr?editors=001 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Thanks Diaco, evaluating onDrag rather than onDragEnd does the trick. now I can decouple my modules nicely.

 

Original pen updated: 

See the Pen LVGOpZ by oisinlavery (@oisinlavery) on CodePen

 

Blake, I feel like Draggable is so tied to the DOM that emitting events should be added. Do you think I should start a new thread or add to the TweenMax events thread?

Link to comment
Share on other sites

I would just add it to the TweenMax thread since there is already a lot good ideas floating around there. I'm all for some type of pub/sub system, especially for draggables, which for the most part can't be scripted like other tweens. Try making a bunch of Draggable objects throwable, responsive, and resizeable, all while bouncing off of eachother and their bounds without using some type of messaging system. It's pretty hard... trust me.

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