Jump to content


Coincidental 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'm making an interactive analog clock using Adobe Edge. The hands of the clock can be dragged to any particular time. When dragged, the movement of the hands coincide with each other. I was able to code the "hour" hand that when dragged the "minute" hand moves accordingly (with 12 times the rotation). It works flawlessly.


var hourHand = sym.$('Clock_H');
var minHand = sym.$('Clock_M');
Draggable.create(hourHand, {
  onDrag: syncMinHand,
  onThrowUpdate: syncMinHand
} )
var hourDraggable = Draggable.get(hourHand);
function syncMinHand() {
  TweenLite.set(minHand, {rotation:hourDraggable.rotation * 12});
However, I want to be able to accomplish the same for the "minute" hand. When the "minute" hand is dragged the "hour" hand moves accordingly (12 times slower). I want to be able to independently move either hand at any point with the other hand corresponding appropriately. Any help is greatly appreciated!
Link to comment
Share on other sites

Congrats on your success so far. It sounds like you have most of it working and 95% of the theory and understanding of the mechanics in place.

Not exactly sure what you need help with as it seems you have a really good handle on how Draggable works. Our support is much more focused on "how do I get Draggable to work?" more than "How do I build a clock?" (which involves much more on the side of mathematical equations and such) but I'm sure if you can whip together a basic CodePen demo as described here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ you will have a much greater chance of getting someone to jump in and knock out a solution.

Link to comment
Share on other sites

Yep, a codepen would really help, and it sounds like you'd just need to do the same thing in reverse to get the effect you're after. In other words, Draggable.create() one for the minute hand, and have its onDrag and onThrowUpdate point to a function that alters the hourHand's rotation accordingly (minDraggable.rotation / 12). That way, you can drag either hand and it works. 

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.