View Transitions

Definition

View transitions, broadly, refers to the general UI concept and browser capability of animating smoothly between two different visual states of a page or application — most commonly implemented today via the native View Transitions API. The term is used both for the general design pattern and, more specifically, for the browser feature that implements it.

Overview

The concept of animating between UI states — rather than having content jump or flicker abruptly when it changes — predates any specific browser API, and has long been achieved through hand-written CSS transitions, JavaScript animation libraries, and framework-specific solutions like React Transition Group or Vue's built-in `<Transition>` component. These approaches typically required manually tracking 'before' and 'after' states, coordinating timing, and often resorting to techniques like the FLIP (First, Last, Invert, Play) method to fake smooth transitions between layout changes using CSS transforms. The term 'view transitions' has become closely associated with the native browser View Transitions API, which standardized much of this previously manual work into a single API call and CSS pseudo-element system, automatically capturing screenshots of the old and new states and cross-fading or animating between them. Because of this, 'view transitions' is often used interchangeably with the API itself in casual conversation, even though the broader design pattern of state-to-state UI animation exists independently across many implementations — framework router transition systems, custom JavaScript-driven animations, and native mobile app view transitions (a longstanding pattern in iOS and Android UI design) all embody the same underlying concept. As a design pattern, view transitions matter because abrupt visual changes — content suddenly appearing, disappearing, or jumping to a new layout — increase cognitive load and make it harder for users to track what changed and why, whereas a well-designed transition visually communicates the relationship between the old and new state (e.g., an element growing from a thumbnail into a detail view signals that they're the same underlying item). This is why transition design has become a deliberate discipline in both native app development and, increasingly, on the web, especially as the native View Transitions API has lowered the implementation cost of achieving polished transitions considerably compared to hand-rolled JavaScript animation logic.

Key Concepts

• General UI design pattern for animating smoothly between two visual states
• Most commonly implemented today via the native browser View Transitions API
• Historically achieved via CSS transitions, JS animation libraries, or the FLIP technique
• Present as a long-standing pattern in native mobile app UI design (iOS, Android)
• Communicates relationships between old and new UI states visually
• Reduces abrupt content jumps that increase user cognitive load
• Implemented per-framework historically (React Transition Group, Vue Transition) before native standardization

Use Cases

Frequently Asked Questions

Related in Web