Browser CSS Page Transitions API aka Shared Element Transitions

a a really cool example from Sarah Drasner.

equipped page enter, which is Basically, they're talking about doing page transitions using a meta tag Head on over to syntax.fm

What? No way. Yeah. Yeah. So you've you've been dreaming of this for

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.

in the 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

And the top reply

if if I'm remembering correctly, she did it in view and

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 Where, of course, if you're using Svelte, there's just like a built in, Yeah. Over a year ago. A year Before I heard about this stuff, it's like, 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 CSD.

their own,

yeah. Interesting. Interesting. And then they is obviously scrapped. So pre Chromium Edge means

That's wild.

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

Somebody, is this is a really sick demo from Scott Tolinski.

Edge.

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

Microsoft Edge was initially

and that demo is

And it says content revealed trans duration 0.6 Yeah. What's up with this API? 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 using the web animations API and request animations frame. So it's really kind of a nice API.

transition 6 HTTP 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.

probably over 4 or 5 years now. No way. That's so fun. Yeah.

anymore. Right? Where and and And the part of the flip animation I'm talking about is that, 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

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, 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 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, plugins that already do this for React. One is called React Overdrive, you can do this to frame or motion

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, Right. Doing page transitions 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, It is now for sale. You know what? I very much remember that tweet from her because

So it really feels like this is really taking

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 Yeah. Totally.

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.

only versions of this. Now I found the CSS code examples in without having JavaScript.

where you could think of it as, like, let's say you have a user avatar So what's up with this this like, that's the why.

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 Prismic.i0forward/

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.

Those things stay on the page because we have HTML 5 push date. Right? To the tweet in 2018 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

and

do the first one, which is on before page unload.

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.

of like, let's say we have a grid of syntax podcasts.

like, yeah, we could probably 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, 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, no longer hosted, and the domain name has been jacked it was a there was a demo at patransmissions.com, Svelte vanilla JavaScript. You can use the REST API. You can use GraphQL

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? that does most of what we want. Right? you basically duplicate your elements on the page if you want to animate them from one to another.

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 And that puts us on the web at a bit of a disadvantage

the Svelte tutorial, 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.

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,

and we have things that are on the next page,

You click on podcast 500, and then it would just open up, 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.

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,

But In reality, we want to do a little bit more than that, whereas we have things that are on the page

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,

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 On this Monday, hasty treat. We're gonna be talking about and we have the, And don't forget to subscribe in your podcast player oh, I got a little bit of an error. Cannot perform construct on detached array buffer, and I say, for a full archive of all of our shows.

ESP.

what? in the browser

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.

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

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.

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.

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

exactly what the user did it in a kind of a weird way with meta tags. This is kinda 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,

and you'll get 14 days for free. It. Definitely a really neat service. Alright. So 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.

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,

Spin the whole website out,

to CSS Grid, Flexbox,

A Wednesday. Wednesday. Peace.

or drop a review if you like this show.

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 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 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,

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

I'm going to do the whole, like, 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.

and transition, and and then I can start play a little music.

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

Yeah. Because you could You could, like, listen. There's like, these things must fire events. Right? Like, pretend just to start

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Boss, and Scott

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,

Monday. Monday. Monday.

the craziest,

As well as just try it out. You can sign up and you could be up and running with the API in probably

Boss. Hey.

it. A page that has people and locations on it. Like, is that a is that a page, or or should they be slices?

Welcome to Syntax.

with it.

you should definitely check out Prismic. Make sure you read all of their core concepts

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

AKA the browser page transitions API, or page hide, which would be events. And then there's also something where you do document dot Create document transition, 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, 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, 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,

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,

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, 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.

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 yeah. Or maybe I'll make a a web version of that once this thing hits. Love it.

They do a great job at that. So if you wanna check it out for your next website,

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.

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.

Some interesting new API proposals for shared element transitions, mount and unmount the elements yourselves. You have to animate them and then unmount them, and it typically involves picking up a library.

designing my content types, and how should I relate them to each other? And, like, if I have

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,

6 minutes and 23 seconds.

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, the user the ability to define a smooth animations between views or pages on the web with minimal effort, so to say, especially because

load the new page, then you clear the old under a flag.

Then you set up the animations 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.

Setting its style dot page transition tag to be empty.

Page transition is equal to message.

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.

This is all, you know, podcast voice coding. Right? We almost had this earlier in Edge and there wasn't, like, a ton of playgrounds for like, most of the playgrounds I saw using these things to be just JavaScript.

a react component or you just you just like

API.

2021.

page transitions

man, how does he has he he's he's, like, he's a time traveler sometimes, I swear.

for an API.

proposal 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,

And the idea here would be that it gives it. The explainer and in the docs for this type of thing to be a bit confusing, pre Chromium version of Microsoft

There's a unified API for this, and we're not having to do it a bunch of different ways.

Chrome.

the next Wesboos here. Wesboos?

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 And it's when a UI element morphs into another element on the next page. There's a handful of, You have to, So then you first asynchronously 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

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