Angular 17 View Transitions API: Create smooth transition animations in a few steps!

in this video we're going to use the view transitions API to add some really nice animations to a simple videos app that I built for seeing my YouTube videos and you can see how the animations are buttery smooth here and if you want to see a video when you click on a video it's going to open up in this View mode with the dark background and then when you go back you can see that and how about if I tell you I didn't write a single piece of custom animation code for this I just used some CSS properties and this is exactly the power of the view transitions API hey everyone uh it's zhan here and I'm a senior friend and engineer so in this video I'm not going to go over how I built actually the functionality for this whole app because I want to focus on The View transitions API and what it brings to the table for web developers but just to go over it I'm just going to give you a general overview of how the app works here so there's a vide dashboard something like this and I have some of my YouTube playlist videos from my YouTube account here now these videos can be um filtered by the tag from here so videos related to the chat uh series that I built are here only and for the maps are here and then there's also a sort button which can be used to sort the videos according to the date of publishing notice one thing here that all of the information uh about the sorting and the tags selected are actually present in the route so for each of the tag changes and the Sorting we actually Chang the root parameters here now this is important for the view transition API and we're going to see that why in a minute any video can be clicked to take to the dark mode viewing with the video player and now you can play this video and it's going to play the video with the YouTube player and you can go back again you can come back with another video so this is a basic functionality of the app and if you go back to the app itself you can see that in your source code we have pretty simple we have two components the videos dashboard and we have the video view which is actually the detail video and we have just a service to get the videos for the playlist which it gets once the app runs great now if you want to complete tutorial on how to build such an app I can create a follow-up video with a separate tutorial for this so tell me in the comments if you like such a video and I will try to come up with a tutorial for this purpose great okay so let's now move on with the main topic of the video and that is what is the view transitions API now the view transitions API is an animation API recently introduced which takes CSS transitions to the next level and allows us to have transitions between page root changes instead of only on a single page now it is an an experimental stage with releases in chromium B browsers such as Chrome and Edge but they coming to Apple and Firefox soon as well so you can count on broad-based browser support in the future now angular added this support for the view transitions API in its latest release with just a single line of code and that we do on the router provide function so how do we convert this app to that smooth animated app that we just saw let's get started with adding the API in our app for the first step so we going to go in our app.config where we specify the provide router function so here along with all of the other um with utility functions we just need to add another utility function called with view transitions now remember this will be available this is available in angular version 17 so make sure to update your angular app to angular version 17 if you want to use this great so let's see how what difference does it make and now when we go here we can see and if you shift you can see a nice subtle animation which is the default CrossFit animation and for this we actually don't need to do anything so that's a nice Plus for it now how does this work so to see that we need to go in the Chrome developer tools and we can go in our animation profile in more tools in the animations section and we can pause our animation here and then when we click on any of the buttons nothing will happen but the animation will be captured when we click on this we can actually use the scrubber to animate it like this so this is exactly what happens the previous View Fades out and the new view fades in this is a CrossFit animation and when we go in elements we can see exactly how this is done so you can see here A View transition section here at the really top of your document so in our section here you can see we have a view transition and we just have a view transition group called root now this represents the whole page that is currently loaded or the whole document you can and this is going to contain an image pair this is basically the transition that is happening so we have an old image and we have a new image and the view transitions API basically transitions between the old and the new for this time great so this all happens automatically and we're just enabling The View transitions API in the angular router but what more can we do with this and how can you separate out different elements on your page let's just enable this animation again so that we can go back to normal so how do we actually separate out different elements on your page so that the browser animates between them now that is easy we have a view transition name property now the view transition name can be any name uh except for none but but this name should be unique and it should be same for the elements which are being transitioned amongst so in our case let's try it out on our header first so you'll notice when you click on a video our header has the same text here so the only thing that changes is the arrow here the back arrow now we don't want our whole header to actually go away and the videos to actually disappear and then come back again we want the my videos to remain the same because the text is the same this is going to give a nice transition to our toolbar text so how do we actually do that so let's first locate our my videos text here in our code so we're going to go to the videos dashboard and you can see in our dashboard we have a nav here which has a a subd called my videos and then we also going to go in our videos view which is the detail U page and here also we have a nav but the only difference is that we have an arrow button here now remember these are different root CH these are different components in angular but you'll see how seamlessly it transforms between different components as well so what do we do do now the text is the same so all that we need to do is we need to give a view transition name which is the same and unique to both of them so in the class here since we're using Tailwind in our app we are going to give the arbitrary um properties notation in Tailwind because the view transition name is not supported as yet so we're going to do it like this we're going to do view transition name let's call this toolbar text Cre and then we're going to do the same here as well view transition name toolbar text okay so the name is the same and the name is unique let's try this out and see how this looks okay so now when we click on this we can see that it sort of jumps in now why does it jump in like that now when we inspect our um text here we're going to see some issue here and that is that this whole diff actually spans the entire width of the header so basically this whole header is just transforming itself that's not what we want we just want it to move from one side because of the arrow so one thing we can do that here is to add a fit content property and in Tailwind we use wfit for it just going to make the container for the my videos text just fit that content itself and not more than that so let's just copy this to this as well and now let's test it out now when we click on this we can see that the text shifts slightly to the right and there is a nice little transition as you can see on the top and we don't even realize that this is a different component great let's insert ECT this a bit again and see uh what happens in our animation so we're going to pause this again and we're going to click on this again and now when you see here you can see this animation happening but in the elements you can see that we have two groups now and that is how it manages the different animation so there's a root animation which is the default CrossFit which still happens as it did before but there is a toolbar text here which only happens on this text and it transitions it takes a snapshot of the old toolbar text and the new toolbar text and then it transitions between the position and the size and the width of that snapshot great so this gives us a a lot of ideas like how about if we add a unique view transition name to each of our videos in our card view here but then the problem is how do we make it unique now fortunately because each video has a YouTube video ID we can actually do that quite easily so let's go back to our code and let's go to our videos dashboard here and in the video's dashboard you can see that we have a for Loop uh across our video and then within that we have a div so how about we give a view transition name to each of these diffs okay so let's try that and since we want to make a dynamic we are going to use the style Dynamic binding provided by angular so we're going to do view transition name and we're going to give it a unique name so we're going to say video Dash and we're going to give the same video ID that we're using at the top here great so every video should have a different ID and that will that is going to uniquely identify every card as a separate element okay let's try this out and let's see how this looks let's start by sorting the things so if you sort it now we can see that yes we get this nice reorganization of the cards without doing anything that without doing anything else so we have smooth animations among the card itself and if for example we go with this thing and we go in material you will see that what happens is that if the card is being reorganized it changes the place but if it goes away it sort of crossfades out now let's see what happens in our developer tools again and if you go in our animations again let's pause it and let's sort it and we can now see that our animations occur pretty nicely but what happens in The View transition and you will see now that we have a view transition group for each of the videos and this is really the key to understanding view transitions API and how to use them effectively in your apps now in this case we only have two video videos but you can easily judge that if you have a lot of videos like for example if you have a lot of videos here in the all section you can now see the amount of sorry let's pause this again and then sort this and you can see now that the view transition is now filled with all of the videos so just to keep in mind that it can get a bit slow when there are lots of groups so a good tip would be to keep your cards or your list elements to a reasonable number of on a single page to keep the animations performance okay so this is really nice and we didn't need to really write any custom code for our animations except for the view transitions identifier great okay now all that's left is now to fix the transition from the videos card view to the new videos view now we would like the card to actually travel to this center of the screen to give a nice transition between this section so how do we do that now as I said the view transition name that is really the key to the view transitions API and we need to use the same name fortunately we have the same ID in the video view as well which we get from this rout here so we can just give that to our main YouTube player and let's go to our video View and in the video view you can see we have a YouTube player here we can simply give a dynamic style binding to this view transition name and the dynamic binding would be the same video Dash and let's call this ID and now let's test things out and now you can see that it seamlessly transitions to our main video now it is almost similar to how you would have it on you know on your mobile app for instance the interactivity is really nice now here I'm using the angular YouTube player latest next version which includes an optimization to show the image and a dummy play button for the video to improve load times and this works with the view transition AP very nicely because otherwise if you only use the embed code it's going to take more time to load and there's a flash in between that time so the transition is not going to be that nice great so now you can see how magical it is to create nice looking smooth animations with the view transitions API but in practice when I have tried it out uh I think we need to keep in mind two things to get everything right and the first is in angular it is attached to the router so we need to have a root change to fire the view transitions this is why I have kept the tag and the sort parameters from the root itself this is a good practice in any case as well but in this case it ensures that the view transitions are run across root changes so if you want to trigger the transitions for any anything make sure it state is stored in the router so that the view transitions can run the second thing is that the transitions are made on the position and the WID and the heights so make sure to have the elements you want to transition to to have the correct width and Heights otherwise it's not going to look the way you want we saw an example in the header here when the width wasn't uh the size of the text and that was causing issues so um as an example another example you can see that it transitions to this image pretty nicely but that is only because the YouTube player has a specific WID set which I did before now if you don't do that and let's remove this you're going to see the width is the width of the big YouTube player will span the whole screen and when you click on reusable this you can see the transition basically just goes to the whole screen and to see this more closely you can actually pause the animation again and you can see this okay so when you click on this you're going to see that the transition basically happens to the whole screen because the WID spans through the whole screen so to make sure that it spans through just the size that you want make sure the dimensions uh the width and height of the elements are the same that you want them to appear in the transition and it's going to appear seamlessly then just like this great and that's it I hope you were inspired by this app as much as I was and intrigued about the possibilities with the view transitions API with angular I foresee it making it much easier to create animated apps in the future just because of its simplicity so thanks for watching watching and make sure to subscribe to my channel if you haven't already it really helps me to grow and to get encouraged to create more videos like this and I'll see you next time in the next video

Channel: Zoaib Khan

Views: 6,074

Keywords:

Id: 4i6BTpChUbw

Length: 14min 8sec (848 seconds)

Published: Fri Dec 08 2023