Jump to content
Search Community

Draggable with ThrowProps using code not touch

Bach 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

Hi guys, first time here and thanks for the amazing work and library 

been using for years!

 

I am using Draggable with ThrowProps to create a wheel, like the wheel of fortune.

It works great using touch and drag etc...

 

Is there a way to spin via code somehow?

I looked at simple Tween for the rotation, but I couldn't get anywhere close to this plugin, to have resistance, snapping etc...

 

Again Touch and drag works perfect to start the spin.

I just need a way to spin by clicking a button for example.

 

thanks guys

Link to comment
Share on other sites

Sure, take a look at the ThrowPropsPlugin docs, particularly the to() method:

http://api.greensock.com/js/com/greensock/plugins/ThrowPropsPlugin.html#to()

 

It lets you define resistance and an end value (which is similar to the Draggable's snap)

 

If you need more help after reading about to(), please consider building a CodePen demo so that we can have a better idea of what isn't working.

 

This link explains how to do that and use our members-only plugins like ThrowPropsPlugin:

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

Link to comment
Share on other sites

Thanks Carl for the blasting fast response!!

 

Here I have created a CodePen demo

See the Pen olHeq by anon (@anon) on CodePen

 

Drag to spin the green box, works great.

Click Spin, and it works except I need a way to implement similar snapping.

 

thanks Carl

Link to comment
Share on other sites

You just had the syntax wrong in a few places. I think you meant to do something like this:

function spin(){
  ThrowPropsPlugin.to(".box", {
    throwProps:{ 
      rotation:{velocity:1500, end:function(endValue) {
        return Math.round(endValue / rotationStep) * rotationStep;
      }}, 
      resistance:300
    },
    ease:Power2.easeOut
  });
}

Feel free to play with the velocity and resistance values. And notice there's no "snap" in regular ThrowPropsPlugin tweens - that's just a term we used for Draggable to make it intuitive. For a regular ThrowPropsPlugin tween, you can just pass the snapping function in to the "end" value for rotation. 

Link to comment
Share on other sites

Excellent thanks guys!

 

Only if it's quick anyway i could, keep set a minDuration for the spin before it starts stopping?

reducing the resistance didn't extend the duration much.

 

I need to keep it spinning for about 8s seconds before it starts to stop.

 

thanks

Link to comment
Share on other sites

Oh, gosh, that's even easier. You can just do a regular throwProps tween with whatever duration you want:

function spin(){
  TweenLite.to(".box", 8, {
    throwProps:{ 
      rotation:{velocity:1000, end:function(endValue) {
        return Math.round(endValue / rotationStep) * rotationStep;
      }}
    },
    ease:Power2.easeOut
  });
}

Notice I set the duration to 8 seconds, but you can do whatever you want. 

 

If you want it to spin at a fixed velocity for a while and then slow down, you could do that too by using a linear tween for 8 seconds, and then start your throwProps tween:

function spin(){
  //spin at a fixed rate for 8 seconds...
  TweenLite.to(".box", 8, {rotation:8000, ease:Linear.easeNone});
  //then decelerate over the course of 5 seconds...
  TweenLite.to(".box", 5, {delay:8, 
    throwProps:{ 
      rotation:{velocity:1000, end:function(endValue) {
        return Math.round(endValue / rotationStep) * rotationStep;
      }}
    },
    ease:Power2.easeOut
  });
}

Does that help?

  • Like 2
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...