Page transition examples: GSAP, Barba.js and View Transitions
A page transition covers the moment one page replaces another, and done well it makes a multi-page site feel like one continuous piece. These examples show the main ways to get there. Barba.js intercepts the link, swaps the content and lets GSAP run a curtain, wipe or mask between the old page and the new one. The View Transition API takes the snapshots and crossfades natively, while GSAP or CSS shapes the change with clip-paths and split-text reveals; there are versions for plain multi-page sites, for client-side routes and for Next.js.
Block and grid transitions cover the screen with tiles that scale in a staggered pattern, and stroke transitions draw an SVG line across the screen as the cover. The category also holds a few in-page transitions: a section boundary that reshapes on scroll, an arch-shaped portal you walk through and a contact form that takes over the hero. Prefer the View Transition API when browser support fits your audience, and Barba when you need full control over both pages.
The examples
Other categories
- GSAP scroll animation examples
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP text animation examples
- GSAP preloader examples
- GSAP image gallery examples
- GSAP card animation examples
- Three.js and WebGL effect examples
- Interactive cursor and physics effects
- Animated footer examples