Jump to content


Spinning Compass with TweenLite and Draggable

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

Dear GreenSocks:


I created the attached compass and made it spinnable with TweenLite and Draggable. Now I'm stuck: The images on top of the compass need to be clickable (and lead to the same URL) no matter in which position the compass stops after the user rotates it. I have lost hair and sleep over this. Does anybody know if this even possible?


(The compass the way it right now is ONE .png image and the little pictures on top are each mapped with coordinates.)


Any help would be greatly appreciated. Even if the help is: Not possible with GreenSock.


Thank you so much!





Link to comment
Share on other sites

Make each box a separate element. From there you can manage changing the window.location using the onClick callback with your draggable.


Something like this, although your border calculation would be different if you're using an image.

See the Pen 0a3823c56edb6b8e560e862a120d06cd?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Wait. What?!?!? You just wrote this for me, Blake? I'm trying to somehow wrap my mind around your kindness and generosity. It's not really working. Oh, Jesus. Thank you is such a small thing to offer in return. But thank you. From the bottom of my heart. I did not expect this.


Also: You are brilliant!!! It would have taken me about three more years of coding to be able to come close to a solution like this.


May I ask one question? It feels ungrateful and way too much to ask, so please don't feel an obligation to answer. You have done way more than enough: How DO I make each of the boxes link to an external URL? My skill is not even enough to take your solution as a starting point and run with it.


And one more question: Would you be available to hire for further work on this project and other projects? Are you good with PHP and JavaScript for WordPress? Would you send me an email if you are interested? Dagi@Studio-7C.com


Thank you, thank you, thank you, dear Blake!


  • Like 2
Link to comment
Share on other sites

You can make each box link to an external URL, just add dragClickables: true to your Draggable config. This will let you drag the boxes, but if the wheel isn't moving and you click on a box, it will follow the link.

Draggable.create(wheel, {
  dragClickables: true,

I'm not available for hire at the moment, but if you have any GSAP related problems, post them here as I usually check this forum several times a week.

  • Like 1
Link to comment
Share on other sites

Sad that you're not for available for hire. :( Not that I hope that for you at all, but let me know if that ever changes?


On this wheel, please forgive me for asking one more question. I have tried to figure this out with my crazy-limited/nonexistent JavaScript knowledge for a day and a half because I didn't want to ask. Without basic knowledge, it's like trying to read/write Chinese.


I would like each of the generated boxes to point to a different external URL. I know I need to be looking at the onClick: function. I changed your function to onClick: function(e) { window.open(url); and added var url= "http://somelink.com"; But this obviously gives me the same link for all boxes. Please, please, please if this is quick and easy for you, would you let me know, dear Blake?


Thank you from here all the way to the moon.


Link to comment
Share on other sites

Aside from a couple angle calculations, this should look less Chinese looking, as most of the stuff is done with HTML now. I created a simple image to replicate yours. The ring is centered inside a 1000x1000 box, so the center is 500px. And from the center of that box to a center part of the ring, it's around 420px, so that would be the radius.


Now you run jQuery's each method on all the boxes, and it will position the boxes around the ring starting at 12 o'clock, going clockwise. After that, create your Draggable and you should be good to go. You can wrap your images in an anchor <a> tag for the url. Right now they are just set to a dummy url. I also added a red outline so you can see the image bounds.


See the Pen e86dc71e2406793fb7b899b73f881f67?editors=0010 by osublake (@osublake) on CodePen

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