Sticky Navigation that Automatically Highlights Section W/ Animation

Hello!

I’m very fond of the way the navigation has been setup on this landing page:

You’ll notice that as you scroll through it, the sticky navigation bar updates to highlight which section your in, and gracefully animates from one section to the next.

I wanted to know if something complex like this was possible in Webflow?

Much Thanks,
Vishal

This is very simple to do.

The Navbar links items change their look when they get the Active state. They get the active state when their link target is reached.

To do that, first give an ID to each section.

Then set each link to each section in the link settings panel.

Then give the same class to all links items

Then carefully style the active state for the link: select a link, scroll to the section it links to, notice the active state appearing in green, now you can add your underline.

Once done, scroll to sections to see the effect.

If you work well and set appropriate transitions on the link item, you can achieve some animation on each link.

To have the graceful bar scrolling rom one item to another, it may be a little more complex and require IX2…

2 Likes

Thank you!

And yes I’m interested in the graceful bar scrolling from one item to another. What is IX2?

The name of the interaction engine in Webflow

Are there any resources available on how to do the animation with IX2? I have been trying some things out but without much success…