View Transitions

Prompted by Jeremy’s post on the topic, I’ve been trying out the brand new view transitions API for multi page apps – i.e. normal websites.

For the technical details, have a look at the linked article and the links therein.

So far, I have been trying it out on this site and on the photo journal. I only kept them on this site.

Currently using Chrome (standard v113 and Canary v115) on my 2018 MacBook Pro, it’s not really performing all that well, resulting in some stuttery and thereby distracting UI shifts. And it makes page transitions slower than they need to be.

This site

I found the standard cross-fade transition to be kind of too much and disabled it with the snippet Jeremy also mentions in his post. But I kept all the custom transitions I experimented with on this site with so far. This is mainly the animated move of the titles and dates from an index page to a permalink page. For videos, movies, and music, I also added transitions for the posters. And that is where this new API is at its most useful and impressive. Especially if it is performing properly – which I myself can’t really experience in full frame rate at the moment. I imagine the transition from the “Media” page to one of its subpages (“Movies”, “Music”, or “Books”) to be particularly impressive, with all those posters flying across the page – but, this does not look smooth at all on my machine.

Anyway, I am keeping those transitions for now. If you want to try it out, enable the chrome://flags “viewTransition API” and “viewTransition API for navigations” and browse this site yourself.

The photo journal

I also tried it with the photo journal, but ended up removing it again. It was just not all that useful or necessary – neither the full-page cross fade, not custom transitions of post titles. And again, slowing page transitions down unnecessarily.

While experimenting, I thought that a bit of animation would be nice, though. So what I did instead, was adding some plain CSS fade-in animation to the <img> elements on post pages and <li> elements on the overview. This eases the hard change from one page to another, is more subtle than with this new transitions API, and it can be seen in any browser right now.

Verdict

I will certainly have a closer and more serious look at this when performance improves and more browsers implement this. And I’ll probably experiment a little more in the meantime. Anyway, it is great, this API exists now! I bet this can make a lot of things easier and we can also get back to building more multi-page apps. ‘Cause my hot take is that a lot of the time, the main reason for a single page app is that people simply can’t stand a full page transition. And this API will eliminate that “problem” with a simple one-line meta tag.