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?
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.
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?
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.
9 Replies
This post was removed by the author
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.
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.
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?
The slippage seems to be a deal breaker. Any thoughts on locking the two movements for more precision?
GSAP...making a sample now.
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.
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
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.
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.