# Page Transitions with the View Transition API (fetch-and-swap portfolio, clip-path wipe) ## Goal Build a **real multi-page portfolio** (three actual `.html` files) where clicking a nav link is intercepted by the native **Navigation API**, which fetches the destination HTML and swaps the document `` inside `document.startViewTransition()`. The star effect is the crossfade wipe driven entirely by CSS `::view-transition-old/new(root)` pseudo-elements: **the outgoing page fades to 40% opacity and slides up 35% while the incoming page wipes in from the bottom via an animated `clip-path`**, both over **1.5s** with a `cubic-bezier(0.87, 0, 0.13, 1)` ease. On mount, every destination runs its own GSAP intro — nav links rise into view, the home headline reveals character-by-character, the about paragraph reveals line-by-line — with Lenis smooth scrolling re-initialized per page. ## Tech Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm), `split-type` (npm, the standalone SplitType library — **not** GSAP's SplitText plugin), and `lenis` (npm) for smooth scroll. **No GSAP plugins, no ScrollTrigger.** The page transition itself uses the **browser-native View Transition API** (`document.startViewTransition`) and **Navigation API** (`navigation.addEventListener("navigate", …)`), not a library. Imports: ```js import Lenis from "lenis"; import gsap from "gsap"; import SplitType from "split-type"; ``` Three sibling pages — `index.html`, `work.html`, `about.html` — each links `./styles.css` and loads the **same** `