Coincidental Draggable

[SteveZ]

Hello,

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, {

  type:"rotation",

  throwProps:true,

  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!

[Carl]

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.

[GreenSock]

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.