View Transitions
Smooth page transitions with Astro's View Transitions API for cinematic page navigation.
Tagline
Pages feel like app interactions.
Value Proposition
Cinematic navigation that keeps users engaged
Who Uses This
Overview
Smooth page-to-page transitions using the modern View Transitions API. Makes navigation feel instant and cinematic.
Features
Fade Transitions
Default transition between pages. Fade out current page, fade in next page.
Shared Element Animations
Same element transitions smoothly between pages:
- Product card → product detail
- Category → products in category
- Author → author bio
Progress Indicator
Visual loading bar during navigation to indicate page is loading.
Browser Support
- Chrome 111+
- Edge 111+
- Opera 97+
- Chrome Android
- Fallback to instant navigation on older browsers
Performance
- 60 FPS animations
- GPU accelerated
- < 100ms navigation delay
- No JavaScript required (CSS-only transitions)
Ontology Alignment
How this feature maps to the 6-dimension ontology
Each page component supports view transitions
Capabilities
Fade Transitions
Smooth fade in/out between pages
Shared Element
Animate same element across pages
Progress Bar
Visual indicator during navigation
Custom Easing
Ease-in-out and custom timing functions
Use Cases
Users see smooth fade between product pages
Product card animates to product detail page
Technical Specifications
simple
12h
Quality Metrics
88%
100/100
Lessons from Ants at Work