How to Create Smooth Page Transitions with View Transitions and CSS

With just a couple of lines of CSS, you can transform your page transitions from a boring, abrupt reload to something that feels more like an in-app experience. Imagine clicking on an element and watching it smoothly rearrange itself as the page transitions—pretty slick, right? This effect is made possible by View Transitions, and while you can’t implement it directly in GenerateBlocks, it only takes a few lines of CSS to get it working.

The best part? This is a progressive enhancement, meaning that if someone’s browser doesn’t support View Transitions, they’ll simply see the standard page reload. Everything will still work as expected, just without the animation. Let’s dive into how you can set this up.

Setting Up the Pages

For this example, I created two pages:

1. Services Page: A list of three services, each with a title, description, and image.
2. Service Detail Pages: Individual pages for each service, containing the same title, description, and image as the services page.

The goal is to create a smooth transition between the shared elements (title, description, and image) on these pages.

Adding Unique Classes to Shared Elements

To make the transition work, we need to give each shared element a unique class that matches across both pages. For example, if we’re working on the “Search Engine Optimization” service, the title, description, and image on both the services page and the detail page need matching classes.

Here’s how I set it up:

1. On the Services Page:
   • Title: vt-seo-title
   • Description: vt-seo-description
   • Image: vt-seo-image
2. On the Service Detail Page:
   • Title: vt-seo-title
   • Description: vt-seo-description
   • Image: vt-seo-image

The naming convention doesn’t matter as long as the classes match. I used vt (short for “View Transition”) followed by the service name and the element type for clarity.

Writing the CSS

Now that the classes are in place, it’s time to write the CSS. Let’s start with the basics.

Step 1: Enable View Transitions

The first thing we need to do is enable View Transitions with a single line of CSS:

css

@view-transition {
  navigation: auto;
}

This alone creates a basic fade effect when navigating between pages. It’s subtle but already a big improvement over the default page reload.

Step 2: Add View Transition Names

To create more advanced transitions, we need to assign a view transition name to each of the shared elements. This tells the browser which elements should animate between pages.

Here’s how it looks:

css

.vt-seo-title {
  view-transition-name: vt-seo-title;
}

.vt-seo-description {
  view-transition-name: vt-seo-description;
}

.vt-seo-image {
  view-transition-name: vt-seo-image;
}

Each element’s view-transition-name matches its class name for simplicity, but you can use any name you like.

Step 3: Test the Transitions

With the CSS in place, refresh your site and click between the pages. You should see the title, description, and image smoothly transition from their positions on the services page to their new positions on the detail page. It’s a subtle but powerful effect that makes the navigation feel more dynamic—almost like zooming into a card and opening it up.

Enhancing the Effect

While the basic transition is already impressive, you can take it further by customizing the animation. For example, you can:

• Add Keyframe Animations: Create custom animations for specific elements.
• Adjust the Duration: Change how long the transition takes.
• Experiment with Easing: Use different timing functions for smoother or snappier effects.

Here’s an example of how you might customize the transition duration:

css

@view-transition {
  navigation: auto;
}

.vt-seo-title {
  view-transition-name: vt-seo-title;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

Challenges with Dynamic Content

If you’re working with dynamic content, like a blog loop in GenerateBlocks, things get a bit trickier. Since the loop generates elements dynamically, you can’t manually assign unique classes to each item. In this case, you’d likely need JavaScript to dynamically add classes to the elements.

This is a more advanced use case, but it’s worth exploring if you want to apply View Transitions to dynamic content.

Accessibility Considerations

As with any animation, it’s important to respect user preferences. Some people find motion effects distracting or even disorienting. To account for this, wrap your animations in a prefers-reduced-motion media query:

css

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .vt-seo-title {
    view-transition-name: vt-seo-title;
  }

  .vt-seo-description {
    view-transition-name: vt-seo-description;
  }

  .vt-seo-image {
    view-transition-name: vt-seo-image;
  }
}

This ensures that users who have reduced motion preferences enabled won’t see the animations, but the site will still function perfectly.

Final Thoughts

View Transitions are a game-changer for creating smooth, app-like navigation on the web. With just a few lines of CSS, you can elevate your site’s user experience and make it feel more polished and interactive.

While this technique is simple to implement, it’s also incredibly versatile. You can use it for everything from basic page transitions to complex animations with keyframes. Just remember to use it sparingly—too much animation can overwhelm users and slow down your site.

So, what do you think? Ready to give View Transitions a try on your next project? Let me know how it goes!