Astro + Native Cross-Document View-Transitions → No Backward Animations

This demo shows a first (incomplete) step to enable native cross-document view transitions on an Astro site. Other demos will improve the situation step by step. See the link at the bottom of the page or the overview.

These pages might look familiar to you, seasoned astronaut! It’s because they are based on the blog template you can select when running npm create astro.

What got changed?

  1. Obviously, the demo content got replaced.
  2. All <main> tags include a transition:animate="slide" directive, generating Astro’s default CSS for sliding view transition animations.
  3. This demo does not use the <ViewTransitions/> component. To activate native cross-document view transitions, the following code was added to the end of BaseHead.astro.
1
<style is:global>
2
@view-transition {
3
  navigation: auto
4
}
5
</style>

Click on the Home, Blog, or About links in the header of this page. You’ll see the content slide in smoothly from the right, even when using the browser’s back button. No matter what, Astro’s default backward animation won’t activate.

Let’s improve this in the next demo (or return to the overview).