::view-transition-old

Understanding ::view-transition-old

The ::view-transition-old pseudo-element represents a static snapshot of the old view state before a view transition occurs. It's a foundational component of the View Transitions API, enabling smooth, native-like animated transitions between different states of a web or mobile application.

The ::view-transition-old is one of several pseudo-elements introduced by the CSS View Transitions Module Level 1 specification. It captures and represents the visual state of an element or the entire document before the transition animation begins. When you initiate a view transition using document.startViewTransition(), the browser creates a snapshot of the current view state, which becomes accessible through this pseudo-element. This snapshot is captured before DOM changes take effect and exists within the view transitions overlay layer during the animation.

How It Works

Key characteristics of the ::view-transition-old pseudo-element:

• Represents the old view state as a static snapshot
• Created when a view transition is initiated
• Exists within the view transitions overlay layer
• Captured before DOM changes take effect
• Animated during the transition period

For cross-platform mobile development, understanding this pseudo-element is essential for creating app-like experiences in PWAs and web-based mobile interfaces. The ability to capture and animate the old view state smoothly bridges the gap between traditional websites and native mobile applications.

Working with ::view-transition-new

The ::view-transition-old works in conjunction with ::view-transition-new, which represents the new view state after the transition. These two pseudo-elements form the core of the view transition animation system. The old snapshot is captured, the DOM updates, the new snapshot is captured, and then both pseudo-elements are animated to create a smooth visual transition.

The Transition Lifecycle

1. Old view is captured and becomes ::view-transition-old
2. DOM updates occur
3. New view is captured and becomes ::view-transition-new
4. Both pseudo-elements are animated simultaneously
5. Default animation creates a smooth cross-fade effect

CSS Pseudo-Elements Hierarchy

::view-transition
 └── ::view-transition-group(name)
 └── ::view-transition-image-pair(name)
 ├── ::view-transition-old(name)
 └── ::view-transition-new(name)

Both pseudo-elements exist simultaneously during the animation, allowing you to style and animate each independently. The default animation creates a cross-fade effect, but you can customize this with your own CSS animations to create unique transition experiences that match your mobile application's design language.

CSS Properties and Styling

Available CSS Properties

The ::view-transition-old pseudo-element supports various CSS properties that control its visual presentation and animation behavior. These properties enable fine-grained control over how the old view snapshot appears and transitions during the animation.

Using view-transition-name

The view-transition-name CSS property is crucial for targeting specific elements during view transitions. By assigning unique transition names to elements, developers can create granular animations that focus on particular UI components rather than the entire page. This is particularly valuable for mobile interfaces where screen real estate is limited and focused animations improve the user experience.

.card {
 view-transition-name: card-transition;
}

::view-transition-old(card-transition) {
 /* Custom animation for this specific element */
 animation: slide-out 0.3s ease-out forwards;
}

By targeting specific elements, you can create polished transitions for cards, images, lists, and other components in your mobile application interfaces.

Browser Compatibility

As of 2025, the View Transitions API has achieved broad support across major browsers, making it a viable option for production use in cross-platform mobile applications.

Progressive Enhancement

For cross-platform mobile development, implementing view transitions with progressive enhancement ensures that users on older browsers still receive a functional experience. This approach is essential for reaching the widest possible audience across different devices and browser versions.

// Feature detection
if (document.startViewTransition) {
 // Use view transitions for smooth navigation
 document.startViewTransition(() => {
 // Your navigation logic here
 });
} else {
 // Fallback to standard navigation
 window.location.href = newUrl;
}

This pattern ensures your Progressive Web Apps work seamlessly across all browsers while providing enhanced experiences where supported.

Implementation in Cross-Platform Mobile Development

Progressive Web Apps (PWAs)

View transitions are particularly valuable for PWAs, creating native-app-like navigation experiences. The ::view-transition-old pseudo-element plays a central role in these animations, enabling smooth transitions that rival native mobile applications.

Key benefits for PWA development:

• SPA-style navigation in PWAs without full page reloads
• Smooth page transitions that maintain app-like feel on mobile browsers
• Integration with service workers for offline-capable transitions
• Reduced perceived loading time through visual continuity

React Native and Web Views

While React Native uses native components, web-based views and embedded web content can leverage view transitions for consistent cross-platform experiences. WebView implementations in React Native can utilize these transitions to create seamless navigation within hybrid app architectures.

This approach is particularly valuable when building:

• Hybrid applications combining native and web views
• Embedded content sections within native interfaces
• Cross-platform applications targeting multiple mobile platforms
• Progressive web apps that integrate with native shell applications

By mastering view transitions, developers can deliver polished, professional user interfaces that compete with native applications across iOS and Android platforms.

Common Patterns and Examples

Page Transition Patterns

These patterns work well for creating engaging navigation experiences in mobile web applications:

/* Slide out old page to the left */
::view-transition-old(root) {
 animation: slide-out-left 0.3s ease-in-out forwards;
}

@keyframes slide-out-left {
 from { transform: translateX(0); }
 to { transform: translateX(-30px); opacity: 0.8; }
}

/* Fade out old page */
::view-transition-old(root) {
 animation: fade-out 0.25s ease-in-out forwards;
}

@keyframes fade-out {
 from { opacity: 1; }
 to { opacity: 0; }
}

/* Slide and fade combined */
::view-transition-old(root) {
 animation: slide-fade-out 0.3s ease-out forwards;
}

@keyframes slide-fade-out {
 from {
 transform: translateX(0) scale(1);
 opacity: 1;
 }
 to {
 transform: translateX(-50px) scale(0.95);
 opacity: 0;
 }
}

List and Grid Transitions

For animating list items during reordering, filtering, or pagination:

::view-transition-old(list-item) {
 animation: list-exit 0.3s ease-out forwards;
}

@keyframes list-exit {
 from {
 transform: scale(1);
 opacity: 1;
 }
 to {
 transform: scale(0.9);
 opacity: 0;
 }
}

These patterns are particularly effective for mobile app interfaces where smooth, intuitive navigation enhances the user experience.

Performance Considerations

Rendering Performance

The ::view-transition-old pseudo-element captures a snapshot of the current view, which has performance implications that developers should understand and optimize for, especially on mobile devices with limited resources.

Key performance factors:

• Snapshot creation overhead: Minimal but measurable on low-end devices
• GPU acceleration: Most transition animations are GPU-accelerated for smooth playback
• Memory usage: Snapshot requires additional memory for the duration of the transition
• Mobile optimization: Critical for smooth performance on phones and tablets

Optimization Strategies

1. Limit transition scope: Target specific elements rather than entire pages when possible
2. Use will-change appropriately: Hint to browsers which elements will animate
3. Avoid expensive CSS properties: Stay away from box-shadow, blur, and layout-triggering properties during animation
4. Test on target devices: Emulators don't fully represent real-world mobile performance
5. Consider reduced motion: Respect user preferences for reduced animation

Performance Checklist

• Use transform and opacity for best animation performance
• Avoid layout-triggering properties during animation
• Test on representative device range (including lower-end devices)
• Monitor frame rates during transitions using browser DevTools
• Consider prefers-reduced-motion media query for accessibility

For optimal web development best practices, always profile your transitions on actual mobile devices and implement fallbacks for users who prefer reduced motion.

Sources

1. MDN Web Docs - View Transition API - Comprehensive official documentation covering all aspects including pseudo-elements
2. MDN Web Docs - ::view-transition-old - Official documentation for the specific pseudo-element
3. Chrome for Developers - What's new in view transitions (2025) - Latest 2025 updates including browser support and new features
4. Chrome DevRel View Transitions Demos - Live demonstrations of view transition features
5. CSS View Transitions Module Level 1 Specification - W3C specification for the API