Scroll Navigation


so I hope you can understand me. I would like to create a horizontal Scroll Navigation.
If I go with the mouse over the Button, the element should move horizontally to the Button-position. But not the same time like the mouse. Slower. And the gears should turn accordingly.
How can this realize.
Thank you for help… (67.9 KB)

Sorry, I’m a little unclear on the effect you are trying to achieve. Maybe you could animate a non-interactive mockup?

It does sound like one tool you may want to look at is Relative Timeline; they allow animating from a current value to an end value (as opposed to a concrete starting value). So in this case the platform/gears would animate from wherever they are at. It might also be that continuing a timeline is enough.

Now I can show you, what I mean:

currently you are “Home”. If you go to button 5 (mouseOver) and (mouseOut) you can see the animation, the same as button 4. The problem is if you go to from the button5 to button4. What can I do?

Thank you! (70.8 KB)

Hi @Maximillian1001

This is how I envision it. Relative timelines are a bit tricky to get your head around but once you start using them you’ll get to understand their use. :smiley:

Attached is a document that I have re-created based on your example above. It’s not that far away from what you were doing. The main concept of relative timelines is that whenever you continue one, it will begin from the last position and time (and anything else) that a “relative” timeline stopped at and continue from there to the end of the new timeline.

In your example (and from what I can gather) you want the object underneath the buttons to move to the next “mouse-overed” button and animate both the object and the “gears”. This takes a little thought to begin with as you 2 separate objects animating (in my view) the gears and the object. Even though you had them on the same timeline animation I split them into 2 separate animations. The document might better explain. Have a look and come back if you have any questions :wink:

Oh, a quick explanation. The small Javascript function (with the (ab)use of tabIndex) is so that the gears rotate anti-clockwise depending on the hierarchy of the button pressed. Higher index = forward, lower index = reverse. (37.4 KB)


Wow, that´s amazing, nice solution.
It’s an other method than Flash.

Thank you for help.
I will show you the result later.


Love the creative use of the tabIndex!