Jump to content
Search Community

circle draggable

proweb1991 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

It rotates, but it's transform origin is center and you have changed it's border radius so rotation is not visible. In order for it to rotate as per that circle you need to "tell" it how to do that.


In following thread, there is a demo that does same thing as you are doing. It uses svg but you can replace it with html easily.



  • Like 3
Link to comment
Share on other sites

Ya I have updated the demo, I am using snap property of draggable and setting throwProps to true. The snap is calculated as follows,

  1. It takes the current rotation value as parameter. (Because draggable type is rotation)
  2. You first divide the value by 90 because 360/4 is 90 as you have 4 states.
  3. Then multiply it with 90.
  4. The resulting value is used to snap the draggable.

I hope that you spend time understanding the code, also it will be good idea to visit the docs of draggable. Most of the stuff is pretty straight forward to understand there.


Though one problem, the current version of draggable has some issue with calculating the snap and sometimes element jumps. This problem doesn't happen with version 1.20.2, following thread has a link to beta preview file see if you can download it otherwise use 1.20.2.


Edit: You can use this.rotation to get current position of draggable using onThrowComplete callback.



  • 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.
  • Create New...