Using Slider to Move Animated 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
});