Animated slider under Menu + Transitioning pages

Design help General
1

Hello All, I’m a designer who is new to Webflow, and I need some help.

Note
I have not designed past the style guide as of yet, but I wanted to have the menu, and transitions down packed, so I don’t have to worry about that in the future, and can focus on layout.

I’ve attached a video showing what I hope to achieve.

Part I - The Menu

I created a menu. It has a logo (home link) and three menu options (Work, About, Contact) and an indicator (black bar).

I would like the following to happen; On the Home page, the indicator isn’t shown. When I click on any of the three options it appears underneath the chosen option. If I choose a different different option it will slide to that new option from its current position. If I go from any of the options to home (by clicking the logo), it fades out/disappears.

Part II - Page Transitions

I would like for each page to slide in from the left or right depending on their relative position to the other page (menu wise)

Thanks in advance.

Here is my site Read-Only: LINK

(how to share your site Read-Only link)

2

@evocarti can you share read only link

3

Refresh the page, the link should be active now.

https://preview.webflow.com/preview/aluko-studio?utm_medium=preview_link&utm_source=designer&utm_content=aluko-studio&preview=fdaf977558ada106af07b0f0723dfcf7

4

@evocarti ok this is only style guide. Now can you share your design

5

I have not began to layout the pages yet, I just would like to know how best to build a menu where the slider transitions.

6

you will use thumbnail slider and you will create two navs. one with black color and other with white color. when user will click on logo then first slider will show and then user will click on the second link then the second slide will show and also first black nav will be hide and second white color nav will be show.

7

Why the thumbnail slider? I don’t need images to move, I need to change between an entire webpage.

8

Something akin to this. Servicios - Siroko Studio