Automatic animations via the browser's View Transitions API

When building websites, you often also want to add tiny animations. Like for example here on my website, zoom to open animation when going to this article. Now, what's interesting about this animation on this website, I'm not using a special animation framework. Indeed, this is actually a multi-page application, single page application, and still I have this transition. How? Well, with help of the View Transitions API, we'll take a closer look at. And there are actually two versions of the View Transitions API or two ways of using it. You can use it in single page application mode if you wanna add animations or transitions within a single page application, as you might have guessed, and the multi-page application mode, before. But let's start with the single page Let's say you're building an application and you wanna make sure that when the user selects one of these items, it opens in a modal where the image transitions into the modal. You could definitely try building something like this with help of extra or packages, but you don't need to. Instead, you can achieve a transition like this JavaScript code. So let's see what is going on here in our code. In the end, I attach an event listener to each of our cards to show the details in that modal when we click on one of these product cards. Now, showDetail is simply a function where I get my product from a list of dummy products, in this case here from an array, and then I set the image of the image element in that dialog. That is what detailImage refers to. It is simply the image with the ID detailImage on it, and we can see that this is an image inside of the dialog that opens up. I set that image in the dialog to the image of the product I want to open so that we can see that image in that dialog, but that alone wouldn't animate it, of course. Then still in this showDetail function, I get the image on that card, so outside of the dialog. So this image here, that is what cardImage will refer to, and to that image outside of the dialog, I set viewTransitionName, this property which is supported by the browser. Now, the concrete name doesn't matter, but it's important that I set viewTransitionName. It will be important to get this view transition by the browser by using this built-in property and setting it to some value. Then we have the updateDOM function in I also set title, price and so on, and where I, in the end, show the modal, but before we call showModal, we actually clear the viewTransitionName on that image outside of the dialog where we just set it, and we instead set it on the image in the dialog. So on this image here, we set viewTransitionName on this image in the dialog, and we set it to the same name we used up here. So it must be the same name, and that is important because that gives the browser the connection between the image outside of dialog and inside of the dialog. Now, it's important that this name must only be active on one element at a time, which is why I clear it on this card outside of the dialog, but it was on that element before and the browser knows that, and therefore it knows that this image outside of the dialog should kind of switch into the dialog. That is why we're setting it outside of it it. That is how the browser makes the last thing you need to do to actually tell the browser to play that transition is you have to call startViewTransition. First, we check if the browser supports it. If it doesn't, we still call updateDOM, but then this viewTransitionName thing will simply have no effect. But if the browser does support the startViewTransition function, so if you're in a browser that supports View Transitions, we wrap updateDOM with that startViewTransition function in the end, and that then tells the browser to animate that change it detected. And that is all. That is how you get View Transitions on the same page in single page application mode, therefore, from the browser. Now, the browser also supports multi-page application transitions, which means when you go from one HTML page to another. So for example here, this is a new HTML page. I have these two folders, A and B. Each of them has an index HTML file, and now we're navigating between these two files, so separate HTML files. And if I go to page B, you see there is a nice transition, and the same if I go back. And with multi-page animations, it's even easier than with single page applications. You need no JavaScript code. The only things you need for multi-page animations by the browser are two things. The first thing is, again, a stable identifier across both pages for

the elements you want to animate. So for example here, I want to animate this hero box here. That is what I want to animate when we go back and forth, and therefore what we have to do identify this element in our CSS code. So here I'm giving it a class, for example, and then in this class, assign it in other ways too, I set this viewTransitionName CSS property. And you might remember with these single we also set viewTransitionName, just programmatically. Now we're doing it with CSS. And I set this to some identifier of my choice, in this case, page-hero. And of course, this name will therefore be the same across both pages, because in both HTML files, this page-hero class is added to the hero, so therefore the viewTransitionName exists on one element at a time because we switched those pages. And on each page we have page hero only on one element. So that's the first important step. To then actually enable and play these animations, you just have to set this addViewTransition thing here in your CSS code. You use addViewTransition, which is ignored if the browser does not support it, still get a page navigation but without an animation. But if the browser does support View Transitions, it understands that it should evaluate this and in there, use that navigation to auto, "Hey, please animate this stuff for me," And that is all in the end. Now, there still are some pseudo elements you can use to control the animation, specifically details like the animation so on, but you don't need those. These are just there to allow you to fine tune how the animation looks and behaves, and therefore, of course, you can dive much deeper and learn way more about the View with help of the documentation on the MDN, for example. But the key takeaway really is that it's mostly about this viewTransitionName thing which you must set on the elements animated, and that you then either use this view here in your CSS code for multi-page applications, or you programmatically start a View Transition for single page applications. But the browser does the heavy lifting of actually animating the element.