Next.js View Transitions
What it does
A multi-page portfolio where clicking a nav link fires a full-page transition built on the native View Transitions API: the outgoing page slides up and fades to 20% opacity while the incoming page is revealed from the bottom via an animated clip-path, both over 1.5s with a cubic-bezier(0.87,0,0.13,1) ease. Each destination also runs its own GSAP intro on mount, the home headline reveals character-by-character and the info paragraph reveals line-by-line (SplitType, power4.out y-translate).
How it's built
| Category | transition |
|---|---|
| Tech | gsap, split-type, lenis |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
How it works
A portfolio with three routes, Home, Projects and Info, where every change of page is a full-screen wipe. Click a link and the page you are leaving drifts upwards and dims, while the page you are going to is revealed over it by an edge that sweeps up from the bottom of the screen. Then each page plays its own entrance: on Home a giant name rises letter by letter from behind a mask, on Info the biography slides up line by line.
It combines two different animation systems on purpose. The page change uses the browser's native View Transitions API, driven with the Web Animations API. The text entrances use GSAP with SplitType. Lenis smooths the scrolling on the longer pages.
How the page change works
When you call the View Transitions API, the browser takes a snapshot of the page as it is, lets you update the DOM, takes a snapshot of the new state, and then animates between the two through special pseudo-elements, one for the old view and one for the new. By default it crossfades them. Here the default is switched off and replaced with a custom choreography: the old snapshot moves up and fades, and the new snapshot is clipped by a polygon that grows from a line at the bottom edge to the full screen.
The important property of this approach is that the old and new pages are images taken by the browser. The site does not need to keep two copies of the page in the DOM or manage overlap between them, which is the hardest part of transitions built with Barba or by hand. The update itself can be anything: in the demo it is a client-side router that swaps the content of a template, and in a Next.js app it is the route change.
The text entrances
Text animation still needs real DOM elements, so it happens after the transition has started, on the new page. The headline is split into characters and each one starts pushed down inside a clipping container, so it is invisible until it slides up. The biography is split into lines and each line gets its own mask, which keeps a long paragraph readable while it animates.
Where it gets hard
The custom animation only works if the browser's own pseudo-element animations and stacking are fully overridden; leave one default in place and you get a crossfade layered under the wipe. Scroll position has to be reset before the new snapshot is taken, or the new page appears scrolled halfway down. Text splitting must run after the new content is in the page, since line breaks depend on the final layout.
Browser support and mobile
Browsers without the View Transitions API still navigate and still run the text entrances, they just skip the wipe, so nothing breaks. The animated properties are transforms, opacity and clip-path, which perform well on phones.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Next.js-style View Transitions — multi-page portfolio with native View Transitions API + GSAP text intros
## Goal
Build a single-page demo that simulates a 3-route portfolio site (Home / Projects / Info) where clicking a nav link triggers a full-page transition powered by the **native View Transitions API** (`document.startViewTransition`): the outgoing page slides up and fades to 20% opacity while the incoming page is revealed from the bottom by an animated `clip-path`, both over 1.5s with a `cubic-bezier(0.87, 0, 0.13, 1)` ease. On top of that, each destination page runs its own GSAP text intro on mount: the Home headline reveals character-by-character and the Info paragraph reveals line-by-line, both sliding up from `y: 400` behind clip-path masks.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm), `split-type` (npm, for splitting text into chars/lines — NOT the GSAP SplitText plugin), and `lenis` (npm) for smooth scrolling. No GSAP plugins are needed. The page-to-page transition itself uses the Web Animations API (`document.documentElement.animate(...)`) targeting `::view-transition-old(root)` / `::view-transition-new(root)` pseudo-elements — not GSAP.
```js
import gsap from "gsap";
import SplitType from "split-type";
import Lenis from "lenis";
```
## Layout / HTML
- `<nav class="nav">` fixed at the top, containing:
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.