Page transitions animate between pages. SPAs make it easy. Multi-page sites can use the View Transitions API.
Types
Fade, slide, scale, push/cover, crossfade.
Tools
SPA: Framer Motion, Vue Transition, Next.js, Nuxt.
Multi-page
View Transitions API. PJAX/Turbo Drive. Astro.
View Transitions API
2024+. Chrome/Edge. document.startViewTransition.
Timing
200-400ms. Not 600+.
Easing
Ease-out. cubic-bezier.
Direction
Forward, back, drilling down.
Loading during transition
Skeleton, progress bar.
Initial load
Staggered fade-in. 100-200ms delays.
Performance
Transform, opacity, will-change.
Mobile
Native-like. iOS swipe back.
Accessibility
prefers-reduced-motion, aria-live.
SEO
SSR/SSG with SPA + transitions.
Mistakes
Too slow, no feedback, poor performance, mobile gesture conflicts.
Examples
Apple, Stripe, Linear, Vercel.
Sayt.uz
Staggered fade, prefetch, View Transitions API. Bounce 12% (was 18%).