Published: Sep 10, 2025
Scoped view transitions is a proposed extension to the View Transition API which lets you start a view transition on a subtree of the DOM. The feature is ready for testing from Chrome 140 with the "Experimental Web Platform features" flag enabled in chrome://flags. We're actively looking for developer feedback.
Quick intro
To start a scoped view transition, call element.startViewTransition() (instead of document.startViewTransition()) on any HTMLElement with contain: layout applied to it.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
The result is a view transition scoped to the subtree of your chosen HTMLElement, with the resulting ::view-transition pseudo-tree getting injected onto that HTMLElement. The HTMLElement acts as a container for the transition animations.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
Scoped transitions allow multiple view transitions to run at the same time (as long as they have different transition roots). Pointer events are prevented on only that subtree (which you can re-enable), rather than the whole document. In addition, they allow elements outside of the transition root to be painted on top of the scoped view transition.
Learn all about scoped view transitions in the scoped view transitions explainer.
Demo
In the following demo, you can move a dot within its container by clicking one of the buttons. This can be done with document-scoped view transitions or element-scoped view transitions, allowing you to see how they behave differently.
Live Demo
Demo Recording
With scoped view transitions, the dot remains clipped by its parent during the transition. Furthermore the dot does not paint over the popover when shown.
Feedback wanted
We're interested in feedback from the web developer community about:
- The shape of the Scoped View Transitions API.
- Use-cases where the feature works well or didn't work as expected.
- How the questions about self-participating scopes should be resolved.
Share your feedback by commenting on CSS WG issue #9890. Familiarize yourself with the known issues and constraints before leaving feedback.
If you run into a bug, file a Chromium bug to let us know.