Navigation Motion

Purpose

Navigation animation may reinforce location, grouping and continuity, but it must never delay clarity. Selected state, labels and destination semantics must be understandable before motion is considered.

Give a page one navigation signature: an active surface, a morphing menu or a preview—not all three. Use short springs, stable geometry and visible focus. Hover behaviour needs an equivalent focus state, while touch users need direct controls.

Reduced motion should update selection immediately. Never hide active state inside a glow, animate links away while focused, trap scrolling accidentally or make route completion wait for choreography.