site: page transitions and interaction feedback - #35
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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, soevery 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 — thechrome 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 paintuntil
<main>is parsed, so a transition never animates toward ahalf-built page.
Micro-interactions
:activeAccessibility and support
All of it is a progressive enhancement. Browsers without cross-document
view transitions (currently Firefox) navigate normally.
prefers-reduced-motion: reducesetsnavigation: noneand drops everyanimation, 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 marksthe current page with a dot, and a full-width bar would fight it.
Verification
Verified structurally in-browser: both
@view-transitionrules parse intothe CSSOM (
navigation: autoat top level,navigation: noneinside thereduced-motion query),
onpagerevealsupport is present, the transitionnames 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 andcauses 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).