Browser CSS Page Transitions API aka Shared Element Transitions

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda, Boss, and Scott

CSD.

Welcome to Syntax.

On this Monday, hasty treat. We're gonna be talking about Some interesting new API proposals for shared element transitions, AKA the browser page transitions API, Something that is really going to hopefully bridge the gap between what we expect out of websites and what we can already get with native apps To get your apps feeling a little bit better without having to implement and roll your own thing or use some sort of library for this. So My name is Scott Talinski. I'm a developer from Denver. And with me as always is Wes

Boss. Hey.

Excited to talk it. About the new browser transition API, or maybe it's not new proposal, I think. Yeah. It's a proposal,

and we have the, See, the proposal link here in the show notes if you wanna follow along and take a look at some of the stuff while we're talking about it, or you could just listen to what we're talking about and And take check take a look at it later. So this episode is sponsored by 2 amazing companies, Prismic and LogRocket.

Wes, would you like to talk a little bit about Prismic? Yes. We know Prismic. It's the headless CMS that we love to use with literally anything. Next. Js, Nuxt, Gatsby, Svelte vanilla JavaScript. You can use the REST API. You can use GraphQL with it.

Prismic is very, very Simple to use, and I love that about it. They have a whole 500 word intro to what is a headless CMS. No nonsense.

They have this really good blog post on what is content modeling. So that that's kind of one thing we don't necessarily always talk about when we're building these headless CMSs is like, How should I approach, designing my content types, and how should I relate them to each other? And, like, if I have it. A page that has people and locations on it. Like, is that a is that a page, or or should they be slices? They do a great job at that. So if you wanna check it out for your next website, you should definitely check out Prismic. Make sure you read all of their core concepts As well as just try it out. You can sign up and you could be up and running with the API in probably 6 minutes and 23 seconds.

Prismic.i0forward/ syntax. They've got a whole bunch of free code that you can check out for your next project. Thank you, Prismic, for sponsoring. Sick. It. This episode is also sponsored by LogRocket.

I'm in my LogRocket dashboard right now. I'm looking at sessions. I'm looking at issues. I'm looking at heat maps and metrics. I'm looking at all this stuff because what LogRocket allows me to do, it. See that I have a, oh, I got a little bit of an error. Cannot perform construct on detached array buffer, and I say, what? We're we're well, why would I have that error? What I can do with LogRocket is select that error, and I can watch a session replay, which is a video showing exactly what the user did when that error came about. That way, I'm not in the dark. I'm not just saying, Oh, it's on a page when this event happened. I actually get to see it happen so that I can see what exactly is going on, and I can see some funky behavior going on on this browser right now, And it's making me a little nervous. So what I'm gonna do is I'm gonna fire this thing up. I'm gonna take a look at the error logs that LogRocket gives you. I'm gonna look at the network request. I'm gonna take a look everything and be able to solve this issue faster than I ever could before because, like I said, you get actual video, you get a video evidence of this thing happening, And you can dive in and figure out what's going on. So if you want to Evidence is the best word for that. What? Evidence? Yeah. Just like a crime went down.

Yeah. That's kind of what it feels like. It turned me into a detective where I like, I I get to see the crime happen. I'm a a detective with, ESP.

It. I can I can see what exactly happened now that I have this video? It's pretty sweet. So check it out at logracket.comforward/syntax, and you'll get 14 days for free. It. Definitely a really neat service. Alright. So browser animations. You know what? This is something that, You know, native apps have kind of always had beat had us beat on the web with. Right? Native apps have these smooth transitions that you can do and really, like, performant Look. Looking, ways of animating things or or stuff when you're changing a page. Right? When you have an iOS app, for instance, Wes, I don't know how much you know about navigation and routing in the Ios, but you have what are called, like, stacks, and you're either popping something into the stack or pushing something out of the stack. And that's how you're doing, like, routing, Essentially, not by URLs.

You have a stack of different views that you're you're having in and out, and it's extremely easy to say, oh, yeah. This one, just Slide this 1 in or slide this 1 out or whatever.

And that puts us on the web at a bit of a disadvantage because to do any sort of page transition on the web. You won't have to be using a JavaScript framework, as in you have to be doing the routing via JavaScript.

You have to, mount and unmount the elements yourselves. You have to animate them and then unmount them, and it typically involves picking up a library.

Where, of course, if you're using Svelte, there's just like a built in, built in directive for that. But and typically in React, you're picking up Framer Motion or, React Spring or one of those and having to manage those states yourself.

And that's not fun, But it's also not as performant as it could be because we're doing that work in JavaScript rather than, like, the browser doing it for us. So in comes this proposal for an API.

And the idea here would be that it gives the user the ability to define a smooth animations between views or pages on the web with minimal effort, so to say, especially because There's a unified API for this, and we're not having to do it a bunch of different ways.

So what's up with this this like, that's the why.

Yeah. What's up with this API? What kind of use cases is this thing looking to target? What what types of things is it looking to do, or is it just giving us basic fade Transitions between pages.

The answer is no. It's it's really, really full featured, the the intention here. So the target use case for this is that They're looking to have several different types of animations take place. One of which is root transitions, which are basically a full page animation between 2 pages. You could think of this as a cross fade between 2 separate pages. The whole thing. Right? The whole thing. Yeah. One page fades into another one or a slide or something like that. The next one is just I was really hoping for this is shared element,

to root transitions. It's a persistent UI that morphs into a full page content. So you You can think of this as a card opening to a full page because, like, yeah, we could probably do the first one, which is on before page unload.

You can you can load in the next page and then put it in the document, fade the old one out, put the new one in. Right? But In reality, we want to do a little bit more than that, whereas we have things that are on the page and we have things that are on the next page, and Those things stay on the page because we have HTML 5 push date. Right? But you wanna be able to animate them from one to another. So this, If I'm reading this right, Scott, you've you've dove into this a little bit more than I have, but Yeah. You'd be able to, like, like a card. You click on a card, of like, let's say we have a grid of syntax podcasts.

You click on podcast 500, and then it would just open up,

to the 500 page, but we'll be able to animate that it from the card link into the card page. Right? Totally. Yeah. And it's fun because, you know, like, it's not like this stuff isn't doable on the web right now. In fact, Even in the the Svelte tutorial, they have, like, a version of the same thing, but it is not that much fun. I you know, I almost never implement the style of animation Because of some of the pitfalls that come along with trying to do this thing in JavaScript.

So this is one that I'd be excited to have and definitely something that you see a lot. It was part of, like, the material design spec initially. I remember when they, like, launched the material design spec as, like, here's stuff you can do. I just remember thinking, like, How am I supposed to do that exactly? Like, what? Where where do I go to do that? So it's nice that that's something they're considering. Another one is a shared element of transitions, And it's when a UI element morphs into another element on the next page. There's a handful of, plugins that already do this for React. One is called React Overdrive, you can do this to frame or motion where you could think of it as, like, let's say you have a user avatar That's in the profile page. It's kind of, like, large and in the middle of the page, but then on any other page, it's in the top right corner.

So that this kind of type of animation be like, when you're changing pages, that 1 circle or whatever avatar element would physically morph and move into that spot that it needs to be, whether that is in the top right or whatever, we'll take care of that animation. So this would be essentially you're you're thinking about 1 element specifically animating to its a current position in the next screen. So if I'm understanding this correctly, that means we don't have to have these flip animations

anymore. Right? Where and and And the part of the flip animation I'm talking about is that, you basically duplicate your elements on the page if you want to animate them from one to another.

And that can be a bit of a pain, and it's almost impossible to do without some sort of framework in place because trying to do that vanilla JavaScript, that'd be really tricky. Is that right? Yeah. That that is and I would imagine that whatever is going on behind the scenes is probably doing that for you, but, like, the fact that it's doing it for you is

Fantastic. You know, I don't want to have to worry about that. The flip the whole flip thing is fine. Yeah. But it's not duplicating it in,

it's not gonna duplicate it in the browser, in the DOM, and I always wondered about that. Like, these like, these flip animations are great if you can buy in at a framework level, But, this has to kind of be done at a browser level because they know where the elements are, and they're actually doing the painting.

So I'm I'm imagining they're not actually duplicating them in the DOM, are they? You know what? I have no idea. Like, physically How it happens here in the c plus domes or whatever. Yeah. Because I do think behind the scenes, Wes, if you look at some of the the JavaScript code examples, I do think there is, like, an old thing and a new thing in the DOM. Yeah. I think it is kind of doing that, but I don't know specifically because I guess so that you can style the old one and the new one. Yeah. I guess that's how that's my understanding of it. That's how, Like, the React transition group worked when you, like, mounted and unmounted.

Okay. That makes sense. Yeah. Well, if you wanted to animate the old one Out and the new one in at the same time, you do need 2 elements. Right? I would imagine so. Yeah. Yes. That that kinda makes sense to me. Yeah.

Next step is the the last thing they're targeting with this is entry and exit animations. You could think of, like, you click to add something and it fades in. Right. Something comes into the dominant phase in.

So it really feels like this is really taking the it. The thing that we we had to do in libraries and and putting it in a way that we can do it performantly. We can do it in the same standard. Everybody's using the same stuff and, it. Hopefully, with less JavaScript because there is some good CSS, only versions of this. Now I found the CSS code examples in it. The explainer and in the docs for this type of thing to be a bit confusing, and there wasn't, like, a ton of playgrounds for like, most of the playgrounds I saw using these things to be just JavaScript.

So, you know, I would love to to get my hands on a a good playground of The CSS version of what this API would look like, but I I think it looks really sort of neat overall to have these things out of The JavaScript world. That said, we have posted in the show notes here some of the JavaScript API, and it would include a couple of new JavaScript events like Before page show or page hide, which would be events. And then there's also something where you do document dot Create document transition, and then you are able to say, await transition start, and then that basically gives you a callback function in which you can control things. Like so if you were to do transition dot start in the callback, it would say 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 the callback returns.

So then you first asynchronously load the new page, then you clear the old Message if the element is still on the page. So they they show you doing a basic document query selector grabbing an old message by a class, Setting its style dot page transition tag to be empty.

So this is the whole CSS API of this, the page transition tag thing. Then the new message has the shared element message, document.queryselector.newmessage.

Page transition is equal to message.

This is all, you know, podcast voice coding. Right? Then you set up the animations using the web animations API and request animations frame. So it's really kind of a nice API.

Again, it's hard to talk about this on the podcast, but it's a nice API. And I like just the fact that it's standardized. It's something that we're not going to have to implement differently in each front end framework and library. And if if you want, like, an easier version of it, like, I bet once this is released, I bet I won't change the way I write my Svelte code. I bet just behind the scenes, the JavaScript will get better for that. Right? We'll have to ship less to do. Yeah. Yeah. There's going to be like a green sock plug in for this or like

a react component or you just you just like Put a fade component around something and kind of similar to the web animations API. Right? Like, not everybody uses that directly. You can, But there's also even easier stuff that is that does most of what we want. Right?

Yeah. Totally.

It. So I've posted a link to some example code if you'd like to check that out. And as a nice little fun thing too, I I saw it. Chris Coyer had, like, a really great post. Of course, you know, it's like, you you I just heard about this page transition API a couple of months ago or a month or 2 ago. And here enough, I find this I find this post from Chris Coir dated April 27, 2021.

Yeah. Over a year ago. A year Before I heard about this stuff, it's like, man, how does he has he he's he's, like, he's a time traveler sometimes, I swear.

But At the bottom of this page post, I thought this was really interesting. This weird history set set, sentence, he says, while I was chatting about this with Alex Revere pointed out do you know Alex? I don't know Alex. Pointed out to me that the pre Chromium Edge had a proprietary page transitions API.

And it says content revealed trans duration 0.6 transition 6 HTTP equipped page enter, which is Basically, they're talking about doing page transitions using a meta tag in the pre Chromium version of Microsoft Edge.

That's wild.

We almost had this earlier in Edge it in a kind of a weird way with meta tags. This is kinda

yeah. Interesting. Interesting. And then they is obviously scrapped. So pre Chromium Edge means Microsoft Edge was initially their own, like engine. Next gen browser. Yeah. And then they tossed it in the bin And they use Chromium now as their engine. So obviously, any of those special sauces got thrown out with it. Wow. That's cool. It's so funny in this This blog post has a link to a a really cool example from Sarah Drasner.

And the top reply To the tweet in 2018 is this is a really sick demo from Scott Tolinski.

What? No way. Yeah. Yeah. So you've you've been dreaming of this for probably over 4 or 5 years now. No way. That's so fun. Yeah.

Yeah. Sarah Sarah Drosnin has a cool example. Yeah. I have been. I you know, I love page transitions and APIs. So page transitions.com.

Somebody, it was a there was a demo at patransmissions.com, and that demo is no longer hosted, and the domain name has been jacked

It is now for sale. You know what? I very much remember that tweet from her because if if I'm remembering correctly, she did it in view and it. That specific example that I used where the avatar was changing positions is, Wes. Yeah. This is this is how my brain remembers that because when when I talked about that As the example, in earlier in this episode, the thing in my brain was Sarah's demo from the view thing. So it all Oh, yeah. Circle here. It's it's one of my favorite demos, that I've seen. So can you use this today? Can you try it today? Believe it or not, this is in the Chrome Canary under a flag.

Actually, it might even be a normal Chrome under a flag too. Let me pop open normal Chrome under a flow. Let me pop up a normal Chrome. Pedestrian

Chrome.

Pedestrian Chrome. Yes. It is in normal Chrome. It's in pedestrian Chrome, and I'll have the the flags link. So if you wanna give this a try, What you do is you just copy this little snippet that we have, which is a path to the flag in Chrome. You can paste this into your URL bar, and it'll take you right to it And allows you to use and enable the document transition API if you want to give this or any of the demos a try in a real working way. But, again, this is obviously not something you should be shipping in any sort of regard because it's it's not a standard. It's not in any browser. It's Not in anything behind the flag or not behind the flag at this point. So it's a fun thing to play around with if you're interested in cutting edge stuff. And if you're interested in seeing what the feature may hold here, maybe maybe you could become the expert in in animations and follow this thing along as it goes. So that way, when it does launch, you can Launch your page transitions API course and become, the next Wesboos here. Wesboos?

This is really Cool. I'm I'm very curious to see how it shakes out. They're probably not gonna rush it because this is, like, another big one it. Similar to CSS Grid, Flexbox, what were the couple that we we had Miriam on to talk about? Container queries, all those, they need a lot of time. I don't know that there's as many problems to solve with this as there was container queries. So maybe in a year or 2, we'll actually have this in the browser. It'd be pretty neat. Yeah. Can you imagine

Right. Doing page transitions in the browser without having JavaScript.

I'm going to do the whole, like,

Spin the whole website out, yeah, to 0 and then spin the new website in on every single click. I can't wait to make that demo

And then I'll do my own sound effects. Yeah. People are talking about star wipes and all sorts of stuff.

Yeah. Because you could You could, like, listen. There's like, these things must fire events. Right? Like, pretend just to start and transition, and and then I can start play a little music.

It. You could definitely do that before page show. Page Todd. You know what? It's it's fun because I I rented a video mixer one time for an event I was doing. If you've ever used like a video mixer, you have multiple video inputs, and it's like a normal audio mixer. But then there's this handle, and the handle allows you to hit I do transitions, and all of the baked in ones were super I mean, they were really funny, like the star transition and stuff like that. You could put the star in the top corner. It. I just remember having so much goofy fun with that just being like, right, right, right. It was, like, hitting this this, like, shift knob doing these it. Stupid video transitions just in my my bedroom giving this thing a whirl. So, yeah. Or maybe I'll make a a web version of that once this thing hits. Love it.

Awesome. Anything else, or should we wrap it up? Sounds good to wrap. Alright. Thanks for tuning in. Catch you on Friday.

A Wednesday. Wednesday. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.