Intent to prototype: View Transitions Module Level 1

484 views

Skip to first unread message

Boris Chiou

unread,

Aug 13, 2024, 11:58:31 AMAug 13

to dev-pl...@mozilla.org

Summary: View transitions is a new API, along with associated properties and pseudo-elements, which provides authors with an easy and browser native way to animate between two different DOM trees, creating a visual transition, removing the reliance on JavaScript to achieve a similar effect. Here, we cover the L1 spec of this API, which allows animations within the same document (single page applications). This post covers some of the use cases.
Note that the L2 spec allows animating during page navigation, and it is our future work.

Bug: Bug 1823896 (css-view-transitions-1)
Specification: https://drafts.csswg.org/css-view-transitions-1/
Standards Body: CSSWG
Platform coverage: All
Preference: dom.viewTransitions.enabled
DevTools bug: Bug 1909173 (dt-view-transition)
Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/677
Other browsers:

Blink: shipped (since Chrome 111), intent emailed (https://groups.google.com/a/chromium.org/g/blink-dev/c/AJJiH6Pjr50/m/6z9YEe4nAgAJ?pli=1).
WebKit: implemented (behind the feature flag: View Transitions), meta bug (https://bugs.webkit.org/show_bug.cgi?id=259055)

web-platform-tests: https://github.com/web-platform-tests/wpt/tree/master/css/css-view-transitions