Page transition

Page Transitions with the View Transition API

by Vanguardia · motionprompts.dev

A multi-page portfolio where clicking a nav link is intercepted by the native Navigation API, which fetches the target HTML, swaps the document body inside document.startViewTransition(): the outgoing page fades to 40% and slides up 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. Each destination then runs its own GSAP intro on mount, the home headline reveals character-by-character and the about paragraph reveals line-by-line (SplitType, power4.out y-translate), with Lenis smooth scrolling.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.25–2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Easing: power4
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, lenis, split-type

native view-transition clip wipe plus GSAP text reveals

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev23,088 chars

# Page Transitions with the View Transition API (fetch-and-swap portfolio, clip-path wipe)

## Goal
Build a **real multi-page portfolio** (three actual `.html`…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.