Centralize a link block inside a horizontal scrolling menu with the current section

Design help Animations & Interactions
1

Hey community! hope you’re all doing good!

I’m building a website for a restaurant and I’m wondering on how to do a specific behavior on the Menu Page. I’ll try to explain here and will also leave some examples below.

Please, let’s use the mobile view for this.

On the Menu Page, I’ve created a horizontal scrolling bar for the categories, so the user can easily choose the category he wants to see, so far so good… The behavior that I’m trying to do and also to be better user experience is, when the user scrolls on the Menu Page and is on a specific category on his viewport the category bar is suppose to have that same category centralized.

Here is some examples…

What I want to do:
https://www.loom.com/share/c1b0dbd7bb314f76bea2cd041c4895ef

My current UI:
https://www.loom.com/share/447942f5b31c4f42be9fc5d9f8b4d1a0

Thanks guys.

Here is my public share link: https://preview.webflow.com/preview/illamare?utm_medium=preview_link&utm_source=designer&utm_content=illamare&preview=d082cac98a13f72e110fb425a1aa265f&pageId=611c63090715618543a1663a&workflow=preview

2

hi @Thiago_Oliveira this is only thing I can think right now how it can be done from what I see in first video.

  1. Top menu should be a slider with variable slide width as length of text will need variable width. Look on net to find one that have this option (variable slide width and centered slide).

  2. Slides should be triggered by position of section with items when entering and leaving viewport. This can be done with intersection observer

  3. slide text link should trigger move to section.

This will be a complex logic in JS code you have manage that will need good amount of preparation before you lay down your fingers on keyboard.

m2c

1 Like