Floating Nav Example

Watch the labels on the left. They know exactly which section you're reading. Click one to jump.

The Trigger

Each section fires an On View trigger the moment it enters your viewport. That trigger tells the nav which label to highlight.

The section doesn't change itself — it changes the nav. That's a Target State interaction. One element controls another.

The labels aren't just indicators. Click any one and it smooth-scrolls you right to that section. Navigation and state, working together.

Scroll up and the active label follows you back. The highlight always reflects where you are — both directions.

Six sections. Six triggers. One text nav that always knows where you are. On View + Target State — that's all it takes.

NOW GO BUILD YOUR OWN →