Jump to content


Draggable - get rotation value and set bounds

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 there,


Just trying to use the Draggable plug-in to make a control knob. 


Is there a way to impose bounds on rotation - say I only want to rotate 0 to 270 degrees? The bounds property seems to only accept x,y values according to the docs.


Also how can I get the current rotation value? - say I want to use this to update a text field in the onDrag method?


many thanks!

Link to comment
Share on other sites



In terms if the bounds issue what you could try is create a simple conditional logic to catch the knob angle on dragEnd, if the angle doesn't match the criteria you can tween it back to 0 or 270. Although the best solution is use ThrowProps with the snap function, that does all the work for you and the results are very cool.


As for getting the object angle you'll need the _gsTransform object. To access it you have to check the drag target and then access the object using the onDrag callback:


OnDrag: function()


var element = this.target,

angle = element._gsTransform.rotation;



Beware that you'll get the angle in radians, so you'll need to change it to degrees, unless you're using the latest preview of the 1.11 version of the engine, which I recommend you to use because there are some great new features in Draggable and you don't have to worry about the angle conversion because it'll work with degrees.




Link to comment
Share on other sites



But thats not quite the behavour I'm after. I want there to be a  hard limit where its impossible to turn past, not a value you can go past and drift back from.


I've tried using the disable() function in the Dragupdate when it goes past a certain angle, which does stop it dead, but then you can't drag back again into the area within the limits.


Feel like I'm getting close, but suggestions appeciated. 


Where do I download the 1.11 preview you mentioned?

Link to comment
Share on other sites

First of all, good news: in the upcoming version (to be launched in the next 24 hours or so), this is dead-simple. You can simply set bounds like this:

bounds:{minRotation:0, maxRotation:270}

And on top of that, you can set up "live" snapping so that, for example, between your min and max you could have it snap to 10-degree increments. You can even set an edgeResistance so that as you drag past the max/min, it'll push back a bit. 


Check back soon for the update. 

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