Skip to content

site: page transitions and interaction feedback - #35

Merged
AviOfLagos merged 2 commits into
mainfrom
site/motion-and-transitions
Aug 29, 2026
Merged

site: page transitions and interaction feedback#35
AviOfLagos merged 2 commits into
mainfrom
site/motion-and-transitions

Conversation

@AviOfLagos

Copy link
Copy Markdown
Owner

Adds cross-document view transitions and a set of small interaction
animations to the field-guide site. Builds on the multi-page split in #33.

Transitions

@view-transition { navigation: auto } lives in the shared stylesheet, so
every page opts in on both sides of a navigation. The nav and footer carry
view-transition-name, which lifts them out of the root snapshot — the
chrome holds still while the content cross-fades and rises, instead of the
whole viewport blinking.

<link rel="expect" href="#main" blocking="render"> holds the first paint
until <main> is parsed, so a transition never animates toward a
half-built page.

Micro-interactions

  • Nav underline grows from the left rather than appearing
  • Pressable things dip 1px on :active
  • Pager arrows nudge toward their direction
  • Copy button swaps to a tick that draws itself in
  • Theme icon turns on hover
  • Tab panels fade in instead of snapping
  • Hamburger folds into a cross

Accessibility and support

All of it is a progressive enhancement. Browsers without cross-document
view transitions (currently Firefox) navigate normally.
prefers-reduced-motion: reduce sets navigation: none and drops every
animation, while keeping the states that carry meaning — the current-page
marker and the open-menu cross.

The underline is scoped to min-width: 861px; below that the drawer marks
the current page with a dot, and a full-width bar would fight it.

Verification

Verified structurally in-browser: both @view-transition rules parse into
the CSSOM (navigation: auto at top level, navigation: none inside the
reduced-motion query), onpagereveal support is present, the transition
names compute on nav and footer, and the hamburger's target transform
resolves correctly.

Not verified: the animations actually playing. The automation browser
reports visibilityState: "hidden", which suppresses CSS transitions and
causes view transitions to be skipped outright — so these need eyeballing
in a real browser before merge.

Build is deterministic and the internal link check passes (9 pages, 0 broken).

Apple and others added 2 commits August 29, 2026 13:58
Cross-document view transitions via @view-transition{navigation:auto}
in the shared stylesheet, so every page opts in on both sides of a
navigation. The nav and footer carry view-transition-name, which lifts
them out of the root snapshot — the chrome holds still while the
content cross-fades and rises, rather than the whole viewport blinking.

A <link rel="expect" href="#main" blocking="render"> holds the first
paint until <main> is parsed, so a transition never animates toward a
half-built page.

Micro-interactions: the nav underline grows from the left, pressable
things dip 1px, pager arrows nudge toward their direction, the copy
button swaps to a tick that draws itself, the theme icon turns, tab
panels fade in, and the hamburger folds into a cross.

All of it is a progressive enhancement. Browsers without view
transitions navigate normally, and prefers-reduced-motion:reduce sets
navigation:none and drops every animation while keeping the states
that carry meaning — the current-page marker and the open-menu cross.

The underline is scoped to min-width:861px: below that the drawer
marks the current page with a dot, and a full-width bar would fight it.
@AviOfLagos
AviOfLagos merged commit a28561d into main Aug 29, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant