Jump to content

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

circle draggable

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


i want create circle draggable slider , but i can't .

draggable plugin (rotation:rotation)just work on item  that select , but i need to drag with an indicator and rotate between states and show related box ... 


Is it possible?

See the Pen MrbZXw by proweb1991 (@proweb1991) on CodePen

Link to comment
Share on other sites

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

thanks @sahil

it's work 


but 2 question .
indicator stop at end of circle .  how can enable loop for rotatet?

and how detect location of indicator to show relative boxes ?? 

Link to comment
Share on other sites

You have to remove bounds for it.

Link to comment
Share on other sites

hi @Sahil
thanks alot ... 
I can not divide the circle into several parts and change the slider according to each one.
And I'm very tired :(:(:( 
Can you help me?

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.