Help with anchor vertical navigation in one pager

Design help Animations & Interactions
1

Hey guys, I’m trying to get a navigation similar to this one: https://whitetailgin.com that reacts and navigates to different sections in the home. I understand how anchor links work, but I’m having trouble with the positioning and the animations.

  1. How do you make it “sticky”? I’, trying to apply this: Build a sticky aside in Webflow | Webflow Blog but it’s too complicated for what I’m trying, I think.

  2. The animations. I can make the hover state of the links, but I don’t know how to make them react to the scrolling position (change when you reach the next section). How can you do that?

Thank you very much in advance

Cheers,

Raf

2

I found a sort of similar case in the forums, but they were having trouble with some bug (not relevant to my question). I just want to know how to build it

1 Like
3

https://v.usetapes.com/34109aJCMd

site : http://vertical-nav-menu.webflow.io/

Read only : Webflow - ✓ Vertical Fullscreen Navigation

1 Like
4

Beautiful. Thank you, Vincent.

If you don’t mind me asking, there’s one additional specific interaction in the example I’d like to ask if you know:

When the navigation is on top of a white background, it’s lines are blue, but when the section is a color background, the lines and links of the navigation turn white. It’s subtle, but man it looks good. Do you happen to know if that is possible, and how to do it?

Thank you again for your help

Raf

1 Like
5

You can add interactions (IX) with a scroll-into-view trigger to target certain classes and change their text color.

6

I will look into that. Thank you :+1:t4:

1 Like
7

@RafTudela did this work for you? because in the example there happens more than a simple changing of the font format.

@vincent how do you create a more complex animation für hover and current states consisting of other elements than the link text (for example these lines next to the links in the example shown by @RafTudela ?