Using Slider to Move Animated Dial

You can set the dial variable equal to the slider variable, thus when the slider moves the dial will move too.

Thank you for your advice, Joanne. I appreciate that. I was able to make the dial meter move clockwise/counter clockwise. However the meter does not move synchronously to left/right when I drag the slider (an image attached.)

I have learned if you move the slider to fast you will have sync issues.

The easiest way would be to use a working dial as the thumb on a slider, but you can’t do that.

You could give it a motion paths, one for right, and one for left, with relative starting points. Using a variable to keep track of the current value, you could move the correct direction when the slider variable changes, and update the current position variable. You would like change the slider variable as it moved, and that might slow things down too much.

Or it might be easier to create a state for every position where you want to stop, and change the state as the slider moves.

You could possibly use JS and GSAP to move a dial slider, but I don’t know if that would be easier for you.

Hi Supada,

I see what you need now. However, you can't move the dial along with the slider in Storyline. And a motion path will be not able to sync the dial precisely. The best way I know might be to create a state for each slide position as Walt suggested. Below is a mockup and story file for reference.

https://360.articulate.com/review/content/d8d9e50f-294d-4c0d-ae82-e1b962021278/review

Could you 'fix' the dial calliper in position and simply have the slider move the rest of the device, and so that way the dial is in the same spot and can swing as intended, but the slider is synced to the image part with measurements?

The visual effect will be the same but it would be like the camera is 'fixed' to the dial.

And ofcourse i couldnot resist making it work completly.

https://360.articulate.com/review/content/9175e7b1-c1a8-4fdb-8efd-738dcacd9761/review

Basically the arrow is in a group with the moveable parts. The arrow itself can be targeted by GSAP without any issues. I showed that before in GSAP and groups posts. The group itself can also be targeted easily and thus moved over the x-axis.

Selecting the elements
let dialGroup = document.querySelector("[data-acc-text='dialGroup']");
let arrowInGroup = document.querySelector("[data-acc-text='arrow.png']");

For both the rotation and the x-movement are some calculations needed. The rotation is simple. For the x-movement we need a proper start and endpoint. I use shapes ( you can make them invisible in Storyline ) to get the proper start and endpoint. Especially with the Modern Player this is important as x-values tend to change when Storyline scales the content.

/*
Using the shapes StartPos and EndPos to get the proper x positions of the Dial Calliper
*/
let startElement = document.querySelector("[data-acc-text='StartPos']");
let endElement = document.querySelector("[data-acc-text='EndPos']");
let startX = gsap.getProperty(startElement, "x");
let endX = gsap.getProperty(endElement, "x");

The calculation for the x-change per tick of the slider is something like this then:
let _xChange = startX+(sliderVal*((endX-startX)/100));

And then we can rotate the arrow and move the group with GSAP.

gsap.to(arrowInGroup, {
duration:0.25,
rotation:_rotation
});

gsap.to(dialGroup, {
duration:0.25,
x:_xChange
});

Wow. That is f#%k!ng amazing, Math!

Totally beyond my understanding but still... wow... that's stunning.

That is amazing, Math! I love how you did it. I was able to make the arrow move horizontally by using States. I animated the frame-by-frame arrow as Joanne and Walt advised. The problem with the state is it doesn't allow me to change the registration point to the bottom of the arrow. When I move the slider, the arrow looks unstable. What you did looks really neat! I will give it a try using your code.

Thank you so much everyone for all the great information! I appreciate it.

Trick i used was creating a png of the arrow in which the center really was exactly aligned so no change needed for the transformation point. With GSAP you can however change it easily. Check my GSAPposts for that. Nut with an artow like this its tough to get the exaxt point