Sticky Logo Shrink Nav

A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.

Compare Add to Prompt Builder

0%pin trigger range

Techniques: Flip.fit into a nav slot
scrubbed ScrollTrigger timeline
sticky header
backdrop blur fade
hairline draw
link compression with per-index x
docked swap at range end
Tags: #header #navigation #wordmark #logo #sticky #scrub #blur #brand
Inspired by: The masthead-to-navbar transition of luxury maisons and editorial magazines — the brand name starts as a masthead and, within the first few hundred pixels of scroll, tucks itself into a frosted navigation strip.
Added: 8 Oct 2026

Playground

Tune it live

Changes re-run the demo and rewrite the prompt so what you copy is exactly what you see.

Scrub smoothing0 = locked to scroll0.8sScroll distancePixels of scroll over which the wordmark docks240pxDocked logo size1×Frosted barAccent#d4ff3a

Two elements share one font: the masthead wordmark and the small logo slot inside the sticky bar. Flip.fit(mark, slot, { scale: true, getVars: true }) returns the single x / y / scaleX / scaleY transform that lays the big one exactly over the small one, and a scrubbed ScrollTrigger (start: 0, end: threshold) plays it across the first few hundred pixels of scroll. Because the bar is position: sticky from the very top and the wordmark is absolutely positioned inside it, both rects live in viewport coordinates and no scroll compensation is needed — unlike a pinned-hero version, the page keeps scrolling normally underneath.

Gotchas: measure in onRefreshInit after resetting the mark’s transform, otherwise a resize measures a half-travelled mark. At the end of the range swap to the real slot (is-docked) so the header is a normal header from then on; onLeave jumps the scrub tween to its end first so a fast flick never shows a stranded mark. Links are compressed with per-index x offsets instead of animating gap, which would trigger layout on every scroll tick.

Subscribers only