Jump to content

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

Draggable: Set a dragging axis for rotation

Recommended Posts

I would like to force a rotating drag element to rotate according to the mouse X axis instead of the actual circular move, I don't know if this feature is implemented in Draggable.


PS : The slider on the Codepen doesn't affect anything, it's only here to help understand my problem.


See the Pen JjYypWr by l-portet (@l-portet) on CodePen

Link to post
Share on other sites

Hi and welcome to the forum. :)


I'm not sure I follow the question. Do you want to drag the little red circle and the green circle rotates? Like this?

See the Pen PoPKRaG by PointC (@PointC) on CodePen


Is that what you meant?

  • Like 2
Link to post
Share on other sites

Thanks for your reactivity!

I did not express myself very well, sorry.


What happens now is this: The circle rotates when I drag it circularly. If my mouse goes too far on the X-axis the circle stop rotating.
What I would like is this: The circle only rotates when I drag it on the X-axis.


And the slider isn't meant to do anything, it was supposed to help you understand but not sure it did 😅

Link to post
Share on other sites

Originally I thought you were wanting something along the lines of what Craig made as well. Your second explanation is much more clear so thanks.


You can rotate based solely on the x axis by changing the type to x and updating the rotation in the onDrag. Here's the basics of how to set it up. You can modify the rotation formula to one of your liking (I made it to where if the user drags to the left or right side of the screen it will rotate 180 degrees in that direction). 

See the Pen ZEbJNOQ?editors=0010 by GreenSock (@GreenSock) on CodePen


I also left out a commented version that rolls the ball which is kind of fun :) I think @mikel might have fun with that concept.

  • Like 2
  • Thanks 1
Link to post
Share on other sites
On 4/30/2020 at 3:39 PM, ZachSaucier said:

I think @mikel might have fun with that concept.




But sure, here is a little game to test your skills ...


See the Pen YzyrgYb?editors=1010 by mikeK (@mikeK) on CodePen


Happy dragging ...


  • Like 1
Link to post
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.