Using Slider to Move Animated Dial

Sep 29, 2022

I have created an interactive dial caliper and desperately need help to figure out how to append an animated dial while dragging slider.  When the slider moves, the dial meter will move along precisely. How can I append the moving dial meter with slider?

I'd appreciate any advices.

Thank you!

 

 

 

13 Replies
Walt Hamilton

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.

 

Joanne Chen

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

Diarmaid Collins

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.

Math Notermans

An alternative to Joanna's Slider/Dial solution as Walt already mentioned is Javascript and GSAP.

Here showing a basic setup for that... changing the Sliders variable to sliderValue... showing it in a textfield and then calculating a rotation for the gaugeArrow.

https://360.articulate.com/review/content/2ff02295-65ba-471e-a811-27efaffc99e3/review

Similarly you can make any element react on a slider change... moving it along any axis as Joanna's sample shows.

Math Notermans

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
});

Math Notermans

Trial and error... the way to learn it. And then Google is your best friend to find anything needed on Javascript, selectors, query-ies and whatever comes along.

Main thing to remember is that Storyline doesnot publish perfect clean HTML5. Not all code you find on the web will work in Storyline. Modules eg. are not supported and more caveats you will discover on your journey :-)

Supada Amornchat

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.