Speaker is feeling good about their progress. They want to talk about the page, transition API, start screen share and single-page apps. Sarah Dresner developed a framework that allows for transitions between pages. Speaker explains how the page starts and changes. They created a website called otech. They are adding and saving events to it and wants to use it in a project.

Speaker's browser is on version 7. Speaker has just got their Chromebook back. Chrome version 111 is the official build. Chrome browser supports page transitions API.

Speaker has been interested in The View Transitions API. C is available in Chrome 111 plus and it's currently in beta, so Speaker wanted to try it out. Speaker shows Sonia how it works in the browser. Sonia's start from the top and it transitions so that thumbnail got bigger and then the list of other ones came up to the side. Speaker is excited about the article.

Speaker is excited about the demo site of the transition across fade. They are excited about the Progressive enhancement of the website. Speaker explains how Chrome on Windows works. They are on their Windows machine. Speaker and their friends are trying out a website. They want to know if it feels like a native app.

Speaker is trying to find an ADA roads Cannon page. They went to two different pages with two different URLs. If they click on one of them, it goes to the homepage. Speaker is excited about the built-in helper in the browser. They are going to use it in their next project. If they use a framework, they can still use it with just rebuilt.

Speaker is going to send everyone off with a new Jabez featuring a Pawnee. They will see them 50 minutes after the hour.

• view transitions
• element transitions
• actual demo site
• enhancement progressive
• actual youtube player
• final break session

Welcome back your dreams were your ticket.

I welcome back that same old place for the night since you hung up everything, and they turn around.

Welcome back stretch.

Oh yeah, hopefully you have been productive and you're feeling good about your progress because every little bit counts.

And yeah.

So I am actually doing not too bad, not too bad.

I didn't get to test the program's I downloaded yet but I did start my laundry and that's going.

And yeah, and some of the small things but feeling good, feeling good.

And yeah.

So let us get into this thing.

I want to talk about.

Okay, so, You see, I want to put this in a certain order or something.

Yeah, probably do this.

Okay, mmm.

Yeah, that's probably fine.

Okay.

I want to kind of follow up on something that we have spoken about before, right?

And it's deals with the page, transition API, start screen share.

Tires Screech Reen on you audio.

I am not sure.

I doubt interesting case.

Okay.

So, shouts to Sarah Dresner.

Like, this is one of the first times I have seen, like, I have always liked, you know, like, with the mobile apps and like, single-page apps.

You're able to have like these transitions in between different, like Pages or different views and like, like, one part will still kind of be there as it's transitioning to the next part and sometimes like that part will move or expand or do something, right?

To me, that's always been kind of cool.

But previously, it was always just within, like, either like a mobile device, like a native application, or like, a single page app, because a single page app is literally just a single page, so it has reference to that element to where it can move it around, right?

So your page is not actually changing, right?

Whereas with this that's all from Sarah Dresner.

Was.

So this is built with next which is like a framework built on top of you and gives you things like actual like page loading and all these things like going to hold Pages all sorts of stuff.

And so for example, let me I am going to refresh it and start, I am going to add this to the list of links so you can check it out for yourself.

Okay, so this is how the page starts, right?

But then if you were to Quick, let us say places.

So take a note of all these things here, right?

So this is the home if I click places.

See how like the button moved and the thick, and the photo guy, little bit smaller and the page itself change and now it says, like / place.

And then, let us say, if you go to group trips, right?

See how that just changed is pretty cool and now / group.

So, if I click this person here, This but now the names changed here.

So if I go to places You see the photo thing.

Change in the names and all that stuff right then go home.

So it all they all have like similar layouts on the different like pages, but the way they transition in between them is kind of cool, right?

All right, so, I will try to do my own like, smaller thing to that, right?

So, I created this site a while ago, otech got events and I use sapper, which is a framework built on top of spelt.

So, similar to how there's nux and View and there's like next and react.

Well, there's sapper and spelt sapper, not so much because sapper got deprecated.

Out kit, which I have not really played with right, but all sapper have like these animation in and out Point things that you could do right now.

It's kind of playing around with it.

Now wanted to use it in a project.

So I made this site otech that events which I am adding and saving.

So you can check it out if you want next to the recording of the video.

So for example, let us say I click under upcoming, right?

When I click view more, You see like little how kind of like faded in, right?

So let us try going back.

So you saw how it kind of like kept the two states.

Like the page I was on And the page that was coming up kind of thing, right?

So you saw how it Like it shifted sort of?

So it's like almost like in two states at once, right?

And, so I am not sure how that magic happens, right?

I have no clue but you needed like a framework or something to do all that, right?

What now, I found out that my browser is on version.

111, 111, point zero, point, yada, yada, a lot of stuff, and she official build, so it's not like early version or anything like that, right?

Because that means that the page transitions API is built into Chrome browsers.

Now, right, I love this chromium but It.

I will have to try with maybe like Edge or something, but, so I saw that I initially thought because my Chromebook like I said I just got my Chromebook back and I saw that the version was 111 on my Chromebook, sounds like, oh, so I checked it on my Chromebook and it worked.

And then I checked out my on, and on like a Windows machine with my Chrome and it's that, and I checked it out.

So thing I checked out was I kind of been keeping my eye on this article here, right?

So this was initially published August 17, 20 21, but updated, November 22nd 2022, right?

And, So I have always kind of liked watching it and like all right let us see what's up with this because I knew that once C is available in Chrome 111 plus and it's currently in beta, and so I was kind of waiting for my stuff to update to 111, and so I could try this out now like previously before so it was.

Yeah.

So The feature was previously called shared element Transitions and sometimes referred to as page transitions but now is officially called The View transitions API.

I am going to show you like this video of it working, and I am going to show you.

It actually in the browser working Capri bviously, I think you had done like flags and gonna be under certain build like a canary build and also the stuff.

But now it's in the browser, like in like if you have a current version of Chrome, it's there all that to say, check this out.

Sonia's start from the top.

So we have a page there, right?

Bam.

And this is just a regular, there is no framework around it.

It's just like HTML CSS, and some JavaScript.

Using that view transitions API, which is amazing.

Like, so you don't need a like, you can just build this kind of work.

So regardless of if you want to use a framework or not, it should work well unless your framework stops it somehow, I don't know.

Not sure.

What this is also you see you clicking it and it how it transitions so that thumbnail got bigger and then like the list of other ones came up to the side and you can navigate back and forth as if this is a regular thing and the page URLs change So all that to say, I will super excited about and then what's cool about this article, they actually go through and show you kind of building it up.

So they show you like the simplest transition across fade, right?

And they do all this and show you things that you got to do.

And it kind of just show you like a picture of it, and they show you like a minute, both demo of it.

So we spoke about this before already.

I believe pretty sure because I was kind of excited about it so now they have the actual demo site.

Oh let me add a link to this on.

Think I added the link yet.

You tell, I am pretty excited about this now.

Now, what was also cool.

Is that browsers?

That don't support.

It just works.

It was just work normally, but if it does support it, so it's like what they call it like, an enhancement Progressive enhancement.

So it's cool like four people be able to enjoy it.

If their browser supports it otherwise you're not going to miss it because it doesn't hinder like it just works.

You don't seem like you're just be like a static just like page 1 page 2 but now you can have that Like, moving and stuff.

Alright, so this is the site here.

I am going to add this to the list of links as well.

I am on my Windows machine.

So it's not like a Chrome book or anything.

So this is just Chrome on Windows machine, right?

And so you can go like here, you can switch through people and stuff.

So even there you see like the crossfading right?

And the this changes you can kind of You see it?

So that's like the Crossfade stuff that are talking about first, right?

So, that's kind of cool.

Yes.

Now let us say, so let us say you click this one down here, right?

So you notice the position of it right, click on it.

So that got bigger right?

And it turned into an actual YouTube player and then all the other, like, videos came up on the side, right?

Amazing.

And now like so since it's just so you know it's like a new URL page as well.

So now I can just, I can click back here if I want.

And it transitions back.

That's so cool.

So let us say this one here.

Right.

Amazing.

And then we have this stuff here.

We can look at.

So they have this, we can click back as well.

Just does it feel like a native app you know I am saying?

But it's a website and that is why I am so happy about this.

So I didn't try this.

So let us say we click this.

All right.

Cool.

Now if I click this one here, I wonder what that does.

It just like shifted it over.

That's pretty dope.

That is pretty dope.

So like it, like, it looked like it shifted and it faded.

While that faded in Wow.

Look like you can do some pretty cool stuff with this.

That is pretty dope and you see again the URL changes and this is just in the no framework is just built into the browsers.

That is so awesome.

And that went back down there.

Okay, real quick.

I am sorry.

I am so flip animation.

So that is there.

Let us put that in the center, right?

All right, that's got big the way it should have.

Now this one was towards the top.

So if I click this, it fades in, right?

But if I go back, say okay, so yeah, so he knew its position and went back, that is wild.

That is wild.

So that means if it wasn't even in.

So okay so let us try to find one that's just shall see later in a rose Cannon.

Alright?

So I am going to not have that one show up so there're no arrows Cannon showing up, right?

Just this person here so let us click on this one.

Now, let us see if I can find an ADA roads Cannon one.

And switch to that.

So here's it arose.

Click that one we're there.

If I go back we will have because it wasn't on the page originally.

So I wonder where it shrinks.

Where is it going to go to?

So yeah.

So it kind of like flashed away because it wasn't there, it kind of like went into the direction, but it went quickly, so there, because there wasn't anything to really transition to interesting.

Interesting.

Okay, okay.

And then, okay.

So let us say we click this one.

I switch to here, right?

So I went to two different pages right with two different URLs.

If I click back here because if I click back, here it goes to the index.

Right to the homepage.

By click back here, it should go back to the previous page right now the index.

So and it did and then it faded in.

Ah, that's super cool.

So it did what I would think it would do because it actually went to the page.

All right?

That is super dope out again, I am a simple person and this is amazing to me that this is just built into the browser.

Now like that is, so I am definitely going to go through more with this because before I think you needed like a flag or something but instead, Haitian.

Like this is a lot of cool stuff.

So I am going to go through this and, you know, it might be kind of cool to have it in my next project I am working on now and might make it on.

That would be pretty cool for some of the stuff.

Okay, I don't know you see, but I think you needed like a flag or something to get it working.

Before.

Okay.

And then so if you are using a framework so it looks like if you're working with a library or framework that abstracts away Dom changes which allow Frameworks do the tricky part is knowing when the Dom changes complete, here's a set of examples using the helper above in various Frameworks, so they kind of helped you doing that stuff.

So, Okay.

Cool.

So if you do, if you do use a framework, then you can still use it with just rebuilt.

Again, it's just built into the browser which is amazing, super cool.

All right, yeah, so okay, yeah.

So as you can tell, I am excited about this.

I think it's really cool.

Stop screen share.

All right, so I am gonna get you all back to work, so I can get back to work because I have got things to do, and thanks again for hanging out, the final breaks it.

Well, yeah, the final break session, I will take a look at artists website.

Name is amusing, watching the videos and David.

You want to come up here again?

You can always request to come up here and yeah, cool.

Thanks again for hanging out.

I will see you 50 minutes after the hour till then I wish you much productivity.

And yeah, weird up.

Thanks again for hanging out.

So right now I am gonna send you all off with some traveling music.

This is new Jabez featuring a Pawnee be the track is called, thank you.

All right thanks again for hanging out, catch you around.

Y'all be easy and peace.