Dots Example

This time, instead of a progress bar, watch the floating menu on the right. It knows exactly where you are.

The Trigger

Each section fires an On View trigger the moment it enters your viewport. That trigger tells the floating menu which item to highlight. The dot moved, didn't it?

Target State

Each section doesn't change itself — it changes something else. That's a Target State interaction. The section is the trigger. The nav menu is the target. One controls the other.

Click to Jump

The menu isn't just decorative. Click any dot and it smooth-scrolls you to that section. Navigation and state — working together.

Two-Way Street

Unlike the progress bar on page one, this menu updates in both directions. Scroll up and it follows you back. The active state always reflects where you are.

Complete

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

NOW GO BUILD YOUR OWN →