Jump to content
Search Community

Draggable Rotation Clockwise Only

Guest
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, is there any way to make a draggable element only rotate in a clockwise direction? I am trying to update the bounds' minRotation value with an onDrag function but I can't work it out. Thanks in advance for any advice!

 

Regards,

Patrick

Link to comment
Share on other sites

Hi @pattysheppard

 

Here's a couple variations using a liveSnap function to limit rotation.

 

The first one has one drawback which you may or may not want. If you rotate counter-clockwise, like say 3 times, you'll have to rotate clockwise 3 times before it starts rotating again.

 

See the Pen eGjBMv by osublake (@osublake) on CodePen

 

 

The second one keeps track of the change in rotation to eliminate that drawback.

 

See the Pen aLjBwy by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

Here is something I came up with, so if you rotate back multiple times. It will snap back on very first rotation in clockwise direction.

 

I don't know if it has functional value though, because any functional calculation on lastRotation will get messed up but I guess it can be fixed by keeping track of difference I guess?

 

See the Pen RLYmvY?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

7 hours ago, Sahil said:

Here is something I came up with, so if you rotate back multiple times. It will snap back on very first rotation in clockwise direction.

 

I don't know if it has functional value though, because any functional calculation on lastRotation will get messed up but I guess it can be fixed by keeping track of difference I guess?

 

See the Pen RLYmvY?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

This is really neat thank you! it works very well since I'm using onDrag to calculate the rotation :)

I'm also thinking about making it rotate to match the finger's position onPress but it's proving to more difficult than I would like. Then it should always be in the right place and count accurately, unless I'm missing something haha

Link to comment
Share on other sites

2 hours ago, Sahil said:

Oh just realized that it doesn't snap with mouse on second drag, I never tested second drag.

 

Not a problem! I've got it all to work exactly how I wanted now so thanks for your help and thank you @OSUblake

 

Link to comment
Share on other sites

  • 4 weeks later...
20 minutes ago, Sahil said:

That is cool.

 

I was actually going to update you with different solution recently, but slipped out of my mind. Following is thread that discusses somewhat similar idea like yours and uses a lot less code.

 

 

 

This is really neat! There's lots of nice examples in that thread so thanks for linking it :) can't seem to find one that works in the same way in terms of rotating multiple times. The reel I linked always picks back up after rotating in the wrong direction which is pretty nice.

Link to comment
Share on other sites

You can make it work easily, the element that is being animated is not tied to Draggable, you can use angle to update UI. What you have done works as well, but if anybody comes across this thread they should use that solution as it is a lot straight forward.

Link to comment
Share on other sites

15 hours ago, Sahil said:

You can make it work easily, the element that is being animated is not tied to Draggable, you can use angle to update UI. What you have done works as well, but if anybody comes across this thread they should use that solution as it is a lot straight forward.

 

Yeah you're right, I should probably give it a go. Still much easier to use a library than not!

Link to comment
Share on other sites

Looks good!

 

A couple of things I noticed.

 

Everybody messes up on this, but when using Math.atan2(), the y component goes first. You had the x component first, giving you a vertical angle. That's why you had to negate the y component and subtract 90 degrees.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

 

How did you come up with this?

if (count % 115 === 0) {
  fullRotation++;
}

 

That's not going to work. The change in rotation is not constant, and if you go backwards while that is true, it will keep increasing the fullRotation count. To get the number of full rotations, keep a running total of the forward changes in rotation, and divide by 360.

 

Here's your demo with some of those changes. Didn't know if you wanted the trigger to be a circle or square, but I made a circle and slightly visible just so you can see it.

 

See the Pen mqmPKW by osublake (@osublake) on CodePen

 

I have some ideas on how to do other parts of your fishing game, but I'll do that it another post tomorrow. 

 

  • Like 4
Link to comment
Share on other sites

2 hours ago, OSUblake said:

Looks good!

 

A couple of things I noticed.

 

Everybody messes up on this, but when using Math.atan2(), the y component goes first. You had the x component first, giving you a vertical angle. That's why you had to negate the y component and subtract 90 degrees.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

 

How did you come up with this?


if (count % 115 === 0) {
  fullRotation++;
}

 

That's not going to work. The change in rotation is not constant, and if you go backwards while that is true, it will keep increasing the fullRotation count. To get the number of full rotations, keep a running total of the forward changes in rotation, and divide by 360.

 

Here's your demo with some of those changes. Didn't know if you wanted the trigger to be a circle or square, but I made a circle and slightly visible just so you can see it.

 

See the Pen mqmPKW by osublake (@osublake) on CodePen

 

I have some ideas on how to do other parts of your fishing game, but I'll do that it another post tomorrow. 

 

 

This is amazing! Thanks very much for taking the time to give me more feedback :)

 

Well I just used the console to work out when it should increment the fullRotation. I changed my CodePen so you can see what I mean which seemed to work to some extent, but I didn't fully understand it until now. So it would only increment if it had done a full rotation from the touched position. Yours seems to be able to be used like a ratchet by counting in that way. I really like your changes like with sizing though!

 

Cool, only the reel is displayed so I think I had it so the player can tap anywhere. Oooo now I'm interested haha

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