Jump to content
Search Community

randomizing a dial using the ThrowPropsPlugin and Draggable

azuki 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

Hey GSAP team,


I'm using the ThrowPropsPlugin and Draggable feature for a spinning dial of sorts.  My dial will lock at 25.71 degrees (dividing a circle into 14 equal sections). I'd like to create a button that randomly spins the dial and stops at one of the defined sections.


Has anyone created this kind of functionality or does anyone have any insight on how I might approach this?


Also, in the GSAP dial example, the rotating image is a single "knob.png".  My dial will have 14 different colors and I'd like each color to link to a new page.  I realize this makes the dial a great deal more complex so I wanted to reach out for any suggestions on executing this elegantly.  Thoughts?


As always, thanks for any insight!



Link to comment
Share on other sites

If I'm understanding you correctly you just need to randomize the velocity of the rotation. 

ThrowProps' end value will let you define a function that will snap the end value to any increment.


Click on the knob here: http://codepen.io/GreenSock/pen/xCEKI

Currently it snaps to 45 degree increments. You can change the rotationSnap value to anything you like.


Not exactly sure how to handle designing your knob with the 14 different colors. 

  • Like 2
Link to comment
Share on other sites

For the colors, are you saying you just want a different color associated with each "notch" (14 in your case) such that when you click some button it determines what color the knob is pointing to and goes to the corresponding URL? Or are you saying you literally want the knob to change colors itself as it moves between each "notch"? 

Link to comment
Share on other sites

Thanks to both of you for your reply.  Carl, that pen is exactly what I was looking for.  Thanks!


Essentially, I'd like each "notch" position to be linkable - like a product carousel that I can spin and when it lands on a product ("notch"), it's clickable to a URL.


Additionally, and I know I'm asking alot here so thank you for your patience, is it possible to have each notch position dynamically change a text field.  So, if the dial spins, lands on "blue", a text field on the page updates to "blue".  Each "notch" would have a different label that would dynamically update the text field.


Thanks again!

Link to comment
Share on other sites

Absolutely that's possible. you'd just add an onThrowComplete in which you could look at the rotation (yourElement._gsTransform.rotation) and based on that, you populate your text field. 


We're happy to help answer GreenSock-specific questions, but if you need more general consulting help, feel free to send me a private message and we could talk about our fee-based services that help with things that exceed the scope of these free forums.


I hope this helped (at least a bit). Happy tweening!

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