Page transition

Next.js View Transitions

by Vanguardia · motionprompts.dev

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).

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Easing: power4
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitType, lenis

Whole-document View Transition: the outgoing root fades 1->0.2 while translating Y 0->-35% as the incoming root is wiped in by a bottom-to-top clip-path polygon, both 1500ms on cubic-bezier(0.87,0,0.13,1); per-route SplitType intros slide chars/lines y:400->0 on power4.out with a 0.075 stagger

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,328 charsCustomize

# 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…

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.