Modern Web Weekly #7
Hi there and welcome back to Modern Web Weekly! After an extended summer vacation we're back with edition #7 and a whole bunch of new subscribers, welcome!
In the previous edition I wrote about View Transitions and how you can use this API to add app-like page transitions to your web apps. View Transitions are already implemented in Chrome but only for single page apps. The spec for View Transitions in multi page apps (MPAs) is still under development but luckily, you can test it in Chrome Canary by setting some flags.
Let's have a look!
View Transitions in multi page apps
When we talk about View Transitions in MPAs we're essentially talking about cross document View Transitions: we navigate from one HTML page (document) to another. This is in contrast to single page apps (SPAs) where the transition is applied to the same document. This enables you to apply View Transitions without having to adopt a SPA architecture.
An added benefit of this is that, unlike same document transitions, you won't need any JavaScript anymore to execute the transition, although a JavaScript API is being discussed to control and customise the transition. But this API is not required to execute cross document transitions.
To enable cross document transitions, you first need to set the flags "viewTransition API" (chrome://flags/#view-transition) and "viewTransition API for navigations" (chrome://flags/#view-transition-on-navigation) in Chrome Canary.
To enable cross-document transitions, the old and new documents need to opt-in using the following meta tag:
<meta name="view-transition" content="same-origin">With this in place, we now only need to add the CSS for the transition which is similar to the SPA version but with some small differences.
In the SPA version, we added the back-transition class to <html> when a back navigation was detected and added the required CSS:
.back-transition::view-transition-new(root) {
animation-name: slide-out-reverse;
}
.back-transition::view-transition-old(root) {
animation-name: slide-in-reverse;
mix-blend-mode: normal;
z-index: 1;
}In the MPA version, this will be a bit more explicit since the homepage and the page we navigate to will both have a class to identify it (home and next) and these will be added to the transition CSS:
.next::view-transition-old(root) {
animation-name: slide-out;
}
.next::view-transition-new(root) {
animation-name: slide-in;
mix-blend-mode: normal;
}
.home::view-transition-new(root) {
animation-name: slide-out-reverse;
}
.home::view-transition-old(root) {
animation-name: slide-in-reverse;
mix-blend-mode: normal;
z-index: 1;
}And that's it!
No JavaScript or client-side routing needed, simply standard HTML documents with standard browser navigation, enhanced with View Transitions.
Check the Glitch demo below in Chrome Canary with the aforementioned flags enabled to see it for yourself!
The demo contains a back link which requires some JavaScript to trigger a standard back navigation when clicked. Other than that, no JavaScript was needed to execute the transition.
When will View transitions be cross-browser?
Firefox has announced that View Transitions are ready to be added and View Transitions are now also a W3C candidate recommendation. Webkit has recently announced support as well so View Transitions will have cross browser support hopefully soon! 🎉
View Transitions without page transitions
Yes, you read that right: you can use View Transitions without navigating to another page.
I didn't realise this at first but after a great demo from Adam Argyle on Twitter (@argyleink) this is actually very obvious.
Recall that to run a View Transition in a SPA you pass the function that updates the view to document.startViewTransition(). In the demo I showed in Modern Web Weekly #6, I updated the whole page so in effect it was a transition to another page, but you don't need to do that.
You can also make a small change in the page and apply a View Transition to it by simply wrapping that change in a function and pass that as the callback to document.startViewTransition(). Totally obvious, but something I completely missed at first.
In the demo from Adam Argyle, he shows a table that you can add a row to using table.insertAdjacentHTML() or delete a row from using row.remove(). By wrapping these methods in a function and passing it to document.startViewTransition() and then defining a CSS transition for the rows that are added and deleted, the adding and deleting of rows is animated.
The power of this approach is that the adding and removing of rows is now completely decoupled from the transition and no additional JavaScript is needed to trigger the animation.
If you would animate the deleting with JavaScript you would have to add a class to the element that is about to be removed to start the animation, wait for the animationend event to determine when the animation is complete and then remove it.
To animate the adding of a row you would add the row with a class already applied to it that puts it in the end state of the animation for adding, then remove that class and add another class that applies the animation for adding, wait for the animationend event to determine when the animation is complete and then remove that class.
By using View Transitions, you can simply define the CSS animation, pass the code that adds or deletes a row to document.startViewTransition() and let the browser work out the rest.
Check out Adam Argyle's demo for the full code.
Browser support for View Transitions
Both Firefox and Webkit have announced support and View Transitions are now also a W3C Candidate Recommendation which means it's on its way to become a official web standard 🎉