This is how I would do it.
Using my Nav symbol template as a basis.
I would adapt it to use like this.
Each of the page indicators/buttons in the symbol are given some Additional Attributes.
type= navbutton
action_ = its page name
Use JS to nav to each scene using the action_ attribute.
Get the Clicked buttons left property and move the Indicator to that position.
The Indicator will fade in and out using a single timeline in the symbol.
We make sure it’s fully faded back in at the end of the JS.
We also give the Indicator the page number.
All the nav buttons get their numbers at symbol load. Again using the action_ attribute.
It is all very simple to set up using the code etc setup of the Magic Indicator.
Obviously the numbering is up to you.
Here is yours done as above.
Page IndicatorMHv1.hypetemplate.zip (220.4 KB)
We can also do away with the code to give the buttons numbers and just use css to populate these. The advantage is you will see this live in the Editor.
We just add the css. Here I have put it inside a rect's innerHTML outside the viewport. Which imho makes it more convenient to edit.
We will then need to change the code line that update the nav indicator
indicator_.innerHTML = navElement
to
indicator_.setAttribute("action_", navElement)
Page IndicatorMHv2.hypetemplate.zip (41.0 KB)