Browser CSS Page Transitions API aka Shared Element Transitions
Jun 27, 2022
Explore the exciting future of web animations with the new Browser CSS Page Transitions API, designed to bring native app-like experiences to the web. The discussion highlights shared element transitions that enable smooth animations between pages, revolutionizing how developers approach UI design. The hosts also touch on Microsoft Edge's progression to the Chromium engine, showcasing impressive demos. Plus, they reminisce about creative uses for the API, envisioning transitions that can be executed without JavaScript.
20:42
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Web vs. Native Transitions
Native apps have smoother transitions than websites, often leveraging JavaScript frameworks and libraries.
This creates performance disadvantages for web transitions.
insights INSIGHT
Page Transitions API Goals
The proposed API aims to standardize smooth animations between web views, minimizing effort and improving performance.
This will create a unified approach, unlike current methods varying across frameworks.
volunteer_activism ADVICE
Transition Types
Consider root transitions for full-page animations (like crossfades) between pages.
Use shared element transitions for persistent UI elements morphing between pages (e.g., a card expanding).
Get the Snipd Podcast app to discover more snips from this episode
In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.
Prismic - Sponsor
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor
LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); } Tweet us your tasty treats
Syntax - Tasty Web Development Treats