Draggable snap delay

[ppdc 2 Likes (Newbie)]

Is there an easy way to make the a Draggable snap only after some time?

I am trying to do some sort of lucky wheel, so the rotation should go on for some time and only at the end of the movement it should snap to a predefined angle.

 

Thanks!

 

Edit: minduration kind of works, but I would rather have something like a 'minspeed'.

Edited January 6, 2016 by ppdc

[PointC 8,599 Likes (Superhero)]

Hi ppdc  ,

 

Have you taken a look at throwProps yet? Sounds like it might be what you're looking for.

 

https://greensock.com/throwpropsplugin

http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/

 

Hopefully this helps.

[GreenSock 8,117 Likes (Superhero)]

PointC is exactly right - the problem you described is precisely what ThrowPropsPlugin solves. I remember years ago needing to spin a wheel naturally but then make sure that it lands at a certain spot (or chooses from a set of possible destinations) fluidly, without any jerking or funky behavior. ThrowPropsPlugin makes that super easy actually. 

 

Have you seen the sample code spit out on the main Draggable page where the spinning knob is? http://greensock.com/draggable

Notice you can select the "Snap to 90-degree increments" checkbox and the code changes. That's the type of effect you want, right? But you'd probably just need different values in there (instead of every 90 degrees)? 

 

Perhaps it would help if you set up a reduced test case in codepen and shot us a link so that we can see exactly what you're trying to do and then fix the code in that context. I suspect that'd help you more than describing the theory. Can you create a simple codepen that has the basic elements in place for what you're trying to do (even though I know it won't quite work the way you want)? 

[ppdc 2 Likes (Newbie)]

Hi PointC, hi Jack,

 

thank you, but yes, I am already using them. Should have mentioned that.

 

I think I misstated the problem, I rather need a minimum initial speed, so that the wheel will turn at least x times before it eases to a stop.

I think it might be easier to make the wheel turn with a Tween... however I would still want to grab the initial speed of the user's drag to initiate the rotation.

Can you follow me?

 

I'll try to set up a pen.

[ppdc 2 Likes (Newbie)]

Here's a pen I created:

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

 

It pretty much does what it's supposed to, except for the one thing, that the wheel should always do 2 full rotations.

Thank you!

[Diaco 1,948 Likes (Superhero)]

Hi ppdc 

 

if i understood correctly , pls try like this :

var dragwheel=Draggable.create(".wheel", {
    type:"rotation", 
    throwProps:true,
    onDragEnd:function(){
        var V = ThrowPropsPlugin.getVelocity(this.target,'rotation');
        ThrowPropsPlugin.to(this.target,{
            throwProps:{rotation:{velocity:"auto",end:function(n){ var N=V>0?n+720:n-720; return Math.round(N/45)*45; }}}
        },3,2);// maximum duration of 3, and a minimum of 2
    }
});

[ppdc 2 Likes (Newbie)]

Exactly what I was looking for!

Thank you very much!!

 

If I understand this correctly you override the ThrowPropsPlugins' Parameters by adding ±720 degrees to the end-rotation value.

I didn't know you could adress the Plugins' Paramters like that.

 

Thanks & cheers!

[ppdc 2 Likes (Newbie)]

Now, if you could only tell me, why this breaks the 'onThrowUpdate' functionality...

I was able to reinstall the ease within the ThrowProps.to-Tween, but 'onThrowUpdate' does not seem to fire any more.

[Diaco 1,948 Likes (Superhero)]

pls add onUpdate callback like another Tweens to your ThrowPropsPlugin tween :

var dragwheel = Draggable.create(".wheel",{    
    type:"rotation", 
    throwProps:true,
    onDragEnd:function(){
        var V = ThrowPropsPlugin.getVelocity(this.target,'rotation');
        ThrowPropsPlugin.to(this.target,{
            throwProps:{rotation:{velocity:"auto",end:function(n){ var N=V>0?n+720:n-720; return Math.round(N/45)*45; }}}
            , onUpdate:rotateItems
        },3,2);// maximum duration of 3, and a minimum of 2
    }
});

[ppdc 2 Likes (Newbie)]

I tried that but it doesn't work. The event fires, but the property 'rotation' of my Draggable is not updated anymore (and I'm using that to rotate the nested elements in the opposite direction).

I could calculate the rotation from the css transform values, but I was hoping there is an easier way.

[Diaco 1,948 Likes (Superhero)]

Pls check this out : 

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

[ppdc 2 Likes (Newbie)]

I owe you.