Jump to content
Search Community

Draggable: Set a dragging axis for rotation

l-portet test
Moderator Tag

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.

Thanks!

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

Link to comment
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 comment
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 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...