Here is an example using the jogDail.js and your animations.
First I have set you intro animation on the Main Timeline and moved the rotations onto another timeline. (spin)
The main timeline runs the intro and with a timeline action at the end runs the Jog function which loads the jog dial.
The new spin timeline now runs for 180 seconds.
This means that in the jog function we can detect when the knob is moved and at what rotation angle it is at.
We can then just tell the spin timeline to go to that number in seconds. Because the rotation angle number is linear you will only see linear movement in the animation.
v1.
Knob Turn.hype.zip (129.2 KB)
v2
The knob in v1 does not respect the z-index and so is under the tick marks .
v2 puts the knob on top of the r tick marks by dropping the tick mark image down the z-index with some added js.
The knob is always set to 0.4 opacity, so we also set it to 1 in the styles.
We also use some styles to give the knob a gradient colour to match the main elements.
Knob Turn V2.hype.zip (129.5 KB)
v3
fixed the angle of the yellow segments. they were originally going to 108’ and needed to go to 90’
Also added a percentage text. On mouse down the text will enlarge. mouse up it shrinks back down. This is done with the hypeDocument.setElementProperty() API.
Knob Turn V3.hype.zip (127.7 KB)
Notes
The Jogdial.js API has a debug mode that just overlays the wheel in green. You should be able to set this to false but in Hype at least this stops the Jogdial.js from working so we HAVE to have it set to true.
In the head I have added a style to set the wheel to transparent which gets rid of this.
You can control the actions/animations/code by points on the spin timeline or within the jog function.