The New Web Animation API that changes The Game!

Key Takeaways

so the view transitions API is finally here and can be used literally everywhere from like reacts nextgs Astro and a lot more Frameworks this API actually allows you to do paid transitions or state transitions super super easily with stuff like for example you got a movie poster you can click on it takes to another page exclusively the smooth transition happens between one page and another or if you just choose another post you can hear the poster like expands and it shrinks maybe if you look at this website maybe the Google Engineers that usually the view page transitions API it makes things look so good and so smooth moving from one page to another so in this video we're going to learn how to use the view transitions API to create stunning Transitions and also mu I using react lux.js and HTML so the view transition API what is that well the future API is a brand new experimental API I think it was originally kind of like invented and proposed by Google Google web team but this API kind of like facilitates how you do Transitions and animations particularly on the web I know we already have tons of apis for doing animation from like CSS transitions to web animation API and so much more but this this API then this new view transition API is a lot simpler and this actually works for a good reason or pretty much it was invented for a pretty pretty good reason so if you take for example to this website in here made by the Google engineer it was basically the guy like behind creating the web transition API and putting the spec for it so there's actually a demo website called HTTP 203 this actually showcase how or why the view transition API is pretty good and how it can make your website look and feel more of like a mobile sort of experience instead of like like a pretty standardized web experience so for example here we got like a bunch of videos all of those are videos and if you go for a second and click on a video so as you see kind of like it gives you that really nice looking feel of like expanding the image and you just like push it up into that and it just kind of like gives you this cognitive feel that you know exactly what's happening on the way on the web page and everything flows dynamically together so for example if you go back as quickly like the image kind of shrinks back to its position the same way as like you know mobile applications or if you're familiar with iOS on like an iPhone or something where you close an application they just like have that shrinking right into where the application is located inside of the home screen or something like that that's exactly what's happening in here so this everything in here is done using the view transition API and if you just take a like a deeper look into this one there's actually a lot of moving part for example the title in here is actually a moving part if you notice into it like oh it's everything is moving inside of that one okay so why do we need this feature we already have a bunch of apis like the web animation API in here or the systems CSS animations in here all of those are already made working apis on the web and they are pretty good developers are familiar with it why do we need a new API basically the whole API here is actually to made page transitions a lot easier and make them look great compared to how we previously done those kind of page transitions so just kind of like communicate the direction flow and make it clear which elements in here are related from one page to another and because literally page transitions or the truth to be said State transitions are super hard even with the tools we already have that's why we needed or we had to invent a new API to make those page transitions easier and like any developer can just pick up their API and make their Pages kind of like transition the way you just saw that particular demo I really recommend you guys to go through like the both of these like the documentation in here or the blog post from the developer.com and the MDM documentation because it provides all the information that you need when you issue to use this API when you should not and all the examples in here so for instance if you take for example the mdn example that is provided which is completely HTML so for example if you go from one image to another as can you see just kind of like cross feeds from one image to another and the title in here is kind of like expands or shrinks depending on you know the lung or the length of the actual text on the top right over there so it's curiously it just makes it really nice and everything in here is actually using the view transition API and literally because this is an actual HTML feature that means any framework any Library any theme pretty much like react Astro uh solid anywhere pretty much where JavaScript actually runs in HTML runs on the web this API can be used very easily and can be implemented so everyone can just enjoy it alright so how does this actually work and how we can use it simple as that it works with a single line of code literally with a single line of code all you're going to actually you do is actually put the document in here you do document start transition view in here and you give it a call back this one because it runs asynchronously that's why you have you have to basically give it a call back in here so once you give it a callback the Callback in here is gonna only run once the transition is like almost done so basically for the browser of the API what you're actually going to do is actually going to take the old content or like the current page that you're currently in it takes a full screenshot of it and actually takes a screenshot of the new page and it kind of does the transition between both of them and animates between them for example if you do Crossfade and animation you're going to animate between the old contents or the old page to the new page in here using Crossfade and technically in here inside of the code back in here you basically want to give it a function that updates the Dom so for example for instance in here this function for us update the Dom somehow is actually responsible for updating them for example we have a movies application and and we have this like whenever we click on a movie you want to showcase the page for the particular movie so when we call this update the Dom we want to actually just you know switch like remove all the list of movies and only show a single movie that was selected the poster should be big all the details about the movie the rating the where the cinemas ours and everything so that's basically the word you know this is this is the function that's actually should be able to do that and of course once you actually do this this like you you give you the transition in here the start view transition in here that's gonna use the Callback in here and it's gonna actually do the transition between the old page and it's going to do it with the new page that's going to be actually changed with this particular function I know it might seem a little weird and hard to grasp on this but with an example you will understand that for sure the other thing you need to know about is actually this provides or the view transition API provide us with like five kind of like pseudo classes in here CSS people classes we can used to customize the style and the animation of you know different elements or the different pages when transitioning from one page to another so for example here the root elements is like the view transition in here we have a view transition group we have like few transition image we have the free transition old and the new and most of the times most of the times you're only going to care about the old one and the new one because literally you want to actually apply some animation to the old when it actually gets removed and you want to jump to the new one so you apply some animation to the old one and technically if you want to just go back to the previous page in here that means you want to apply something to the new one most of the times it's actually where you want to apply the animation but the others can be also used for some advanced stuff or they can be used literally all together now let's see how we can actually implement this page transition in a framework like next year's with react of course I have Astro Astro already supports that one so I really really advise you guys to go ahead and try Astro it's pretty nice framework especially with the addition of view transition API they really nailed it with the implementation so I really like that one for next years they still haven't supported that one just yet I hope they do officially in the future but for now we can actually hack our way through to make that work with nextgs it's not even that super complicated thing so likely for us is so likely for us there is actually a really nice guy that created a library for us or more of like a hook for us that allows next year's to work out of the box just by calling this hook instead of the you know the up file and it's going to just support the view transitions API so this is actually called the use view transitions you can go and install it using npm new yarn just do npm install or yarn install and just as simple as that and for nookges of course there are two ways using the Pages directory which is the old way for this one it's actually pretty simple all you can actually do is actually use next router view transitions hook and you call it inside of the up.js and that is it for the second one the up router in here you actually didn't go to call using like two components and you put them inside the root layout the first one is enable router review Transitions and the second one is the auto view transitions on click you make sure you post put them on the root layout it's the root layout to make sure that actually works perfectly so you could capture clicks and he knows exactly when to navigate on that old or the new page and yada yada of course these ways are a legit way to do it it's not going to cause any performance issues or something but they have some trade-offs as actually listed in the documentation so for me in here of course I already did this I did that I did use next router review transitions what you actually need to make sure you're passing the events from the use router you grab the router you do router.events and you make sure you pass that one perfectly in there in order to make sure it actually captures the events and knows exactly when to navigate back and forth and when to apply the view transitions API okay so for our website in here we've got a list of movies all of these are movies in here we have like popular movies of the week and the awesome animation that we will actually want to do on the transition we want to do is actually when we click on the movie in here it takes us to a single page that is only single for that particular movie to like showcase the poster of the movie the title of the movie some info about the movie so for example in here if I click on that one exclusion here it goes to a brand new page and next year's page in here it kind of like enlarges the kind of like poster in here for us from like depending on the previous page and this if you compare them if I go back for example in the previous page it shrinks that into position if they click on it it just kind of like expands it and it keeps you in position this is basically what the view transition API does of course you can customize it to any animation you want but by default it kind of like animates the position width and height and it doesn't fade in as well of course if you notice the title in here and you know there's some details if I go back and hear excuse to them they they Crossfade as well if they click on them excuse me they come up in here all of those are customized animations of course you can basically click on all of those and you can just any movie in here it just grabs it from a position it's curiously it just makes the usual experience so so smooth and so enjoyable more of like you're basically working with a mobile device okay so how did we do that of course let's go go ahead and take a look into this for example we've got the movies page this is actually where we render the list of movies like all this list of movies there's actually the responsible one it grabs the movies of course it fetches them from the API using get static props it grabs the movies it goes through movies dot map and it renders every single movie in here passing it the movie theater of course if you go inside of the movie in here always simply have link this link is actually when we click on the poster of the movie it takes us to a single page of the movie or the page responsible for the movie using like movies for slash movie ID and you have like an image in here the image is pretty simple just like class name SRC of the image and the alt and the special thing that we needed to add to the image to make it work with the transition API is the style view transition name this one to Marcus CSS view transition name property and you give it the like a unique name only meant for that particular image and if you notice in here we're just assigning a unique name depending on the movie ID so every single poster or from movie is going to have a completely different like transition naming or review transition name so you can transition differently compared to the others that way we can have this really nice animation kind of like expands and it shrinks back and it knows exactly what to expand and what to shrink depending on that particular unique name of every single poster and by default you don't need to apply any animation because the view transition API by default applies the kind of like width height and position transforming animations out of the box for you of course you need to put this style on here in the view transition name both on the movie and also you need to put it exactly instead of like where you actually render the single page of the movie exclusion here movies ID this is actually the component that is responsible for rendering every single movie which is like the Standalone page for the movie you put a little style and you need to put that one as well in there because they have to exist with the same exact name on both pages so the browser API can know exactly black which image that is and which elements that was previously on the on the old page versus the new one so you can kind of like do some transition between them and that's basically all you need to provide and because we're already using this use next router view transitions it's actually behind the scenes it's going to call the start view transition callback the Callback that we talked about before that one is right here like when you call document start view transition and you give it like a callback that's already going to be called automatically For You by The Hook when when the transition happens so you don't have to worry about you only want to call this one when basically you're doing some HTML stuff like vanilla HTML with JavaScript you have to call this one but when you use a framework most of the times you're going to use like an integration a hook or something like that that's going to allow you to do that automatically when the routing navigation happens so now what about this fit captioning component the fake caption has the movie title and whether it's like for adults only or for everyone that's basically the same thing you can can basically go through and style and you can do like oh view transition name you can add for example movie adults to that component and it can easily work for you or you can customize everything in animation and how it fades or how it kind of like bounces through and all that kind of stuff with CSS unfortunately it's not just yet supported with like Tailwind CSS I hope they do that in the near future but you have to use vanilla CSS so I kind of I had to go through create a style.css file and instead of that one actually put all the CSS needed excuse in here I have like thick caption H2 I'm already put in a view transition name for both of them in here as the span as well as creating here the H2 is the title The span is you know adults or not adults so I'm already naming those and giving them transition names and here either using the tutor class we talked about before for example The View transition new and you give it exactly which name that you want for example in the movie adults and while only the child that this particular child to affect that one and as well for the title in here I want them to do some animation so I want like 300 millisecond ease in and I want like fade in animation and the slide up animation so it kind of like fades in and it slides up pretty slowly when it enters of course it's actually the entry animation because the new one represents the entering animation and of course in here you can do like oh H1 separately and here you can do different delays so you can delay between them now for the exit as well the same thing you use the old instead of the new one where we're using the new in here I can use the old for both like the movie adults and the title and of course I can apply completely different animation for example like Fade Out and slide down instead of the slide up and the same thing in here happens for like the animation delay for each one for like Title One movie adults and of course for the keyframes in here or like the Theta the slide down the slide up all of them are actually custom keyframe animations using CSS case their animations that can be easily created in here and actually used and that's my friends how you can do this really nice animation when you click on it it kind of like Fades up and or slides Fades and slides up or if you go back it kind of like slides down and Fades out as well and the same thing happens in here here all the materials are looking pretty pretty nice in here they just make it look so nice and so smooth this this expanded animation I really really like it and for instance if you take for example Astro because Astro has already this filter built in and it supports it super natively so it makes everything look smooth for example this application that moves applications builds using Astro so if you click for example the Spider-Man exclusive expands and everything comes up in here really smoothly when you go back like it takes to a new page where we go back in here that works fine as well or if you for example go through here and actually choose another actor it kind of like expands it it does the other page transition so everything looks really really well super smoothly using the view transition API so anyway guys thank you guys for watching hope you guys enjoyed and hopefully you guys actually like this view page transition API and maybe you can create something creative with it anyway guys see you guys hopefully in the next ones