I recently hosted JetBrains JavaScript Day with guest speaker Fred K. Schott of Astro fame, who spoke about the View Transitions API being introduced in modern browsers. You should watch the video, which will give you a primer for this blog post; frankly, it’s such an incredible presentation.

In this post, we’ll explore how to mix three remarkable web technologies to get a fantastic user experience with little to no effort on your part. Of course, I’m speaking about using ASP.NET Core Razor Pages, HTMX, and View Transitions to smooth the transition between pages and reduce the perceived performance of those hops between pages.

Let’s get started.

What are View Transitions?

View Transitions is a new approach that gives web designers more native-like animated transitions between navigation events. These navigation events can be complete page transitions or elements moving from one part of the page to another. As web developers, we can focus on performance practices while allowing the web platform to do a lot of the heavy lifting of animation.

While I could explain the technical nitty-gritty of the View Transitions API, Jake Archibald did an excellent job explaining it better than I ever could.

In short, we can decide how a page visually transitions from one state to another using JavaScript and CSS animations.

Why HTMX?

While an argument could be made that you don’t need HTMX here, there are a few reasons I recommend it when working with ASP.NET Core Razor Pages.

First, the hx-boost feature of HTMX allows us to squeeze more performance out of our page transitions. The body element from a new request is swapped into our existing page, thus skipping the expensive step of parsing CSS and JavaScript resources.

Second, since HTMX 1.9.0, we can specify an additional transition:true value on hx-swap attributes to opt in to view transitions. This is simpler than the imperative style mentioned in the previous explainer above.

Finally, HTMX brings more valuable approaches we’ll use as we build our ASP.NET Core application.

View Transition Sample

Let’s first see this sample in action and walk through the steps necessary to get View Transitions into your application.

example

Pretty cool. Each navigation performs a transition with a cool slide animation, which is commonly used in native-style applications. Additionally, the visual shell of the site does not animate but instead stays in place.

Let’s walk through the steps to get this into your applications, and you’ll be surprised that no C# will be involved in the following guide.

The first step is to add HTMX to your head element. You can install HTMX via an asset package manager like NPM or a CDN provider. For simplicity, I’ve included the CDN version below.

<script src="https://unpkg.com/htmx.org@1.9.8"></script>

Next, you’ll want to apply the hx-boost attribute to a container that has anchor tags as children. In the case of this demo, I added the attribute to the body tag as I want all anchors to perform the View Transition animation.

<body hx-boost="true" hx-swap="transition:true">

You’ll also notice the body tag has an hx-swap attribute with a transition:true value. This marks our element as the root View Transition element.

Finally, we need to add some CSS animations and values to our site’s stylesheet.

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(90px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-90px); }
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

body {
  margin-bottom: 60px;
  view-transition-name: slide-it;
}

.navbar {
  view-transition-name: main-header-text;
  animation: none;
  mix-blend-mode: normal;
}

footer {
  view-transition-name: footer;
  animation: none;
  mix-blend-mode: normal;
}

We’ve created some basic animations that we apply to each element. Each rule must get a unique view-transition-name value so that the View Transitions API knows how to identify each element uniquely.

That’s it! We now have the implementation of the example you saw previously.

Conclusion

It’s shockingly simple to get a pleasant native-like experience in your ASP.NET Core applications with a bit of HTMX and take advantage of the advancements in the web platform. The View Transitions API is still experimental and not fully supported across all browsers, but most Chromium-based browsers and Firefox already support it.

If you’d like to run this sample on your development environment, I’ve created a GitHub repository where you can clone and try it.

Thank you for reading my blog posts and sharing them with colleagues. Cheers.

References