Link navbar buttons to ‘section’ in horizontal scroll

Design help Animations & Interactions
#1

Our website primarily uses horizontal scroll for navigation, and as the content is very long we have a navigation bar made of div sections that are supposed to bring you to different sections in the website when you click on them and Color the circles based on where you are.

If you click on a previous section it should bring you back to that section. Only way I’ve figured out how to do this is to use ‘Move X’ alongside the click to trigger an animation to move the ‘camera’ along the ‘track’ by a certain view width. But I get different behaviour based on the screen I’m on - I would really prefer to have something similar to anchors that let you navigate to specific locations rather than approximate view widths.

As there are no ‘anchors’ for navigation in horizontal scroll in Webflow, is there any workaround for this that’s worked for other people? Ok with using code.

[https://gi-disappearances-354956297092572e8eb04.webflow.io/][sample site]

[Mapping Nav to horizontal scroll sections or slider][Previous unanswered issue with same question]

@sabanna this is similar to a previous question on modals in horizontal scroll that I had. Could you advise on whether this is possible or any available hacks?

#2

Hi, @Bianchi_Dy

There are no horizontal “anchors” in Webflow. But you can re-create this effect by combining interactions with “vertical” anchors/links.

I created the example project for you that you can “investigate” and clone

I also included the modal popup functionality.

NOTE: The horizontal scroll accomplished by detecting the scroll-div position (start entering vs out of view). That div size will depend on how many “screens” you need to have in the top horizontal scroll area and so Interaction on it will need to be adjusted. Although it moves the horizontal scroll area in VW, so it should work for any screen size.

Let me know if you have any other question.

Respectfully,
Anna

1 Like
#3

Thanks so much! Yes, this approach works well.

1 Like