Jump to content
Search Community

Draggable snap delay

ppdc test
Moderator Tag

Go to solution Solved by ppdc,

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 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 by ppdc
Link to comment
Share on other sites

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)? 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
    }
});
Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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
    }
});
  • Like 1
Link to comment
Share on other sites

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.

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