Page transition
Also called: view transition, route transition, screen transition.
An animation between two pages, so the old page fades or slides away while the new one comes in, instead of a hard cut. Modern browsers can do it with the View Transitions API.
A tiny site with two pages. With a page transition, the old page fades and slides away while the new one slides in, instead of a hard cut.
Page 1
Say it in a prompt
Add a page transition between the list and the detail page: use document.startViewTransition when the browser has it, fade the old page out while moving it 16px left and fade the new page in from 16px right over 320ms ease-out, and turn off the default size animation. Without View Transitions support, just swap the page; with reduced motion, swap instantly. Where it shows up
- Tapping a photo in a list app, where the list slides away and the detail page slides in instead of the screen flashing white.
You might describe it as
- smooth change from one page to the next
- page slides away when I click a link
- no white flash between pages
Not to be confused with
- Fade-up entrance
A page transition moves from one whole page to another; a fade-up entrance is one part of a page appearing.