I’ve just spent a long time improving the little view transition of tags on my bookmarks page. Before my fixes the text was being stretched and the transition looked out of place. So I took the time to dive into how to make view transitions look like they are supposed to and I learned quite a few things.

By far the best resource for learning about this topic is Jake Archibald’s post about handling aspect ratio changes. He also has a great video on how to debug view transitions with dev tools.

To add view transitions to specific elements on my website, I’ve copied the code I found on David Bushell’s website:

@media not (prefers-reduced-motion: reduce) {
  view-transition-name: attr(data-id type(<custom-ident>), none);
  view-transition-class: heading;
}

With this CSS you just need to add a unique data-id="id-{some_identifier}" attribute to your elements (replace {some_identifier} with a unique id) and they’ll each transition as a single object.

I’ve now added view transitions to my blog headlines, my notes and the little tag cloud on my bookmarks page.