Marco Heine_

Today I learned

View Transitions are coming (Astro 3.0)

Edit this Post Opens in new tab

You may have already heard that a new View Transitions API Opens in new tab has been developed and will soon be available in all major browsers.

View Transitions help the user to stay in context when switching between pages or states. For example, the user might click a link to another page, and some elements might be animated to make the transition smoother and make it feel less like a hard switch between the two pages.

It’s what makes most native apps superior in that case and looking so cool and smooth. SwiftUI has had this kind of technology for years.

I have planned a whole blog post about the new View Transitions API as an in-depth tutorial, but I will wait until every major browser supports them (looking at you, Firefox), and we can use it in production.

Nevertheless, I’d like to discuss them briefly because Astro released a new major version (3.0) Opens in new tab last week. Part of this new release is enabling developers to use view transitions inside Astro. That makes them the first web framework to support the View Transitions API.

They offer these four different ways:

  • Morph persistent elements from one page to another
  • Fade content on and off the page for a less jarring navigation effect
  • Slide content on and off the page for a bit more personality
  • Persist common UI across pages, with or without a refresh

It’s straightforward to implement and use. You just have to import and add the view transitions routing component on the page you want to use them.

---
import { ViewTransitions } from 'astro/dist/components/view-transitions.js'
---

<h1>My Page</h1>
<ViewTransitions />
<div transition:name="fade">
  <p>Some content</p>
</div>

Astro will automatically create default page animations based on the similarities between the old and the new pages. That’s all!

You can also identify the corresponding view transition element yourself. For example, I wanted a view transition on the image in a blog post overview page and on the image on the individual blog post.

So first, you view the list of blog posts, and when clicking on a specific blog post, a view transition should happen on that image.

To achieve that, you only need to add the same transition:name value on both image elements. It’s like magic!

If you want to see view transitions live in Astro, check out the Spotify clone built by Igor Opens in new tab. You have to make sure to use Chrome for that.

I’m curious how we’ll take advantage of this new possibility and if it will change how it feels to browse the web.

Sources

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco