# View transitions (`view-transitions`) Native page and section transitions: a card's photo morphs into the next page's hero (and back), and same-page switches cross-fade with a shared-photo morph. No library. | | | |---|---| | Tag | Flow | | Size | 1.7 KB gzipped own code (JS 1.1 KB + CSS 0.6 KB; 4.0 KB raw) | | Dependency | none (vanilla + native APIs) | | Best for | Multi-page client sites (service pages, menu, team), tabbed features on any site | | Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/view-transitions/) | ## What it does CSS opts every same-origin navigation into a cross-document View Transition (@view-transition). A link with data-vt hands its image the shared name on pageswap, so it grows into the destination's .wbl-vt-hero; on Back, pagereveal gives the name to the card you came from. WBL.vt(fn) wraps any DOM change (tab, filter, hours week/today) in a same-page transition with an instant fallback, and [data-vt-toggle] wires segmented buttons to panels. ## When to use - Client sites with more than one page: home ↔ service ↔ back. - Feature switches (Cuts / Colour, Residential / Commercial) where a photo changes. ## Don't - Long transitions (keep 0.25-0.45 s). - Name more than a couple of elements per transition (every named element is a separate snapshot). - Use on preview links that are one page anyway (batch 1's page-transition already covers privacy/terms). ## Reduced motion, no JS, accessibility - Reduced motion: transitions skipped (CSS animation none + skipTransition on arrival + WBL.vt runs instantly). - No support / no JS: normal navigation and instant panel swaps. - Toggle buttons use aria-pressed; hidden panels use the hidden attribute (not just opacity). ## Notes - Support: Chrome/Edge 126+ and Safari 18.2+ for cross-document; same-document in all three engines including Firefox 144+. ## Relation to the effects libraries Batch 1's page-transition is a plain cross-fade between pages. This adds the shared-photo morph, back-navigation morph and the same-page helper. ## Use it Copy this folder to the site as `/wbl/view-transitions/` (keep `vendor/` if there is one), then: ```html
Dry cut in progress

Dry cutting

Cut dry, the way it falls. $65 with a blow-dry.

Colour rinse at the basinColour and gloss ``` Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`, `--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the one-line bridge to the preview builder's `--a / --ink / --bg …`). ## License Our code: WBL-owned, original. No third-party code.