Forum Discussion
Help Needed - Dial turn and animate (at the same time)
I need to create an activity wherein a shoulder bone (dial) turns counterclockwise and slides down (animation path). Then when the user turns it clockwise, it slides upward. I need these actions to happen simultaneously and smoothly, not one after another. Any ideas or other ways to approach this?
- MichaelCarlinoCommunity Member
John, my thought would be to create a slider that moves the image up and down and link the dial to the slider. I currently have an example for you but I can try and work on it to see what I come up with for you.
- WaltHamiltonSuper Hero
See if this will help you.
The big drawback is that if it is rotated too fast, some of the motion is lost and it gets out of place, That's why I put a Reset button on them.
I also attached the picture I used for the Dial fill.
- KeithPace-a7c48Community Member
Walt - thanks for your help on this. How might I move the motion paths titled "Down" and "Up?" Also, if I turn the bone slow it moves more than if I turn it fast. Any advice on how to lock that motion?
- KeithPace-a7c48Community Member
The slippage seems to be a deal breaker. Any thoughts on locking the two movements for more precision?
- MathNotermans-9Community Member
GSAP...making a sample now.
- MathNotermans-9Community Member
Not 100% yet, as there is a weird flip at the end of a 360 rotation... but basics work...
https://360.articulate.com/review/content/fe9f8556-ad5d-4d6a-9f62-10e48bb78187/review
Basically this code will rotate the bone...var swayBone = document.querySelector("[data-acc-text='Bone sway.png']");
gsap.to(swayBone, {duration:0.1, rotation: "-=1"});
In my sample i do have more complex code, but will not bother you with that till its perfect.
The issue with Storyline is that it has no default 'MouseDown' option. Then you could use that and loop this code...and it would work. Now you either need to add a MouseDown event or use a drag like in the dial. - MathNotermans-9Community Member
Still a bit of a hickup after 360 degrees, but a lot better...
https://360.articulate.com/review/content/834a830d-afb7-4f13-889c-29e0ddb744b5/review - MathNotermans-9Community Member
If this is what you need...
https://360.articulate.com/review/content/e4813f3e-44d2-43c7-ab49-be3a5b7ab2ad/review
I will explain how to make it. - WaltHamiltonSuper Hero
I think the Option 1 or option 2 slides may work for you. I am also including a video on how to access the motion path lengths.