Bramus

On view transitions for single-page applications.

Week thirteen | June 5th, 2024 | sell CSS sell JavaScript

At this point, we all know how world of web development is always evolving, and the introduction of view transitions in CSS is a testament to that. This new feature allows us to create visual transitions between different views on a website, enhancing the UX in single-page applications (SPAs) and even multi-page applications (MPAs). On June fifth, I had the honor of attending the Pre-CSS Day - an event hosted by my minor Web Design & Development a day before the actual CSS Day with talks and a dinner that us students aren't invited to.

This year, one of the speakers at the Pre-CSS Day was Bramus, a Google employee who quite literally invented the view transitions and built the CSS-functionality.

A demo of view transitions

Bramus started by telling us about the work of his collaborator, Maxi Ferreira, who has demonstrated the potential of view transitions through his project live-transitions.pages.dev. The site showcases a smooth, visually appealing UI/UX with page transitions that are engaging and intuitive. Built using the same document view transitions, this project is an example of the capabilities available for SPAs on Chrome (and partially on Safari, though not yet supported by Firefox).

As Bramus puts it,

The view transition API gives you the power to create seamless visual transitions between two different views on your website.

It leverages snapshots of the old and new views, blending them smoothly to create a polished transition effect.

How view transitions work

The mechanics of view transitions are quite straightforward:

1. A snapshot of the current view is taken;
2. This snapshot is rendered;
3. The new view's content is added to the DOM;
4. Another snapshot is taken of the new content;
5. The browser layers the new snapshot over the old one to create a seamless transition.

In CSS, this process is controlled by specific properties:

• The root element should contain view-transition-name: root, indicating to the browser to take a snapshot.
• For the old view: ::view-transition-old(root)
• For the new view: ::view-transition-new(root)
• :root::view-transition is layered over your page, utilizing properties like ::view-transition-image-pair(root) for blend mode isolation and ::view-transition-group(root) for positioning and sizing.

Here's a quick example:

:root {
  view-transition-name: root;
}

::view-transition-old(root) {
  /* Styles for the old view */
}

::view-transition-new(root) {
  /* Styles for the new view */
}

:root::view-transition {
  /* Overlay styles */
}

JavaScript Integration

To make the most out of view transitions, you can integrate them with JavaScript:

// you can
await CallbackDone;

// then make sure to
await transition;

// and finally
await until the transition is finished;

Practically, use cases could be as follows:

1. SPAs: Implement view transitions without major architectural changes. For instance, transitioning between an image and a button or between two different types of content elements.
2. MPAs: Utilize cross-document view transitions to create smooth navigations between pages. Both the source and destination pages must have @view-transition { navigation: auto; } and share the same origin.

Customizing View Transitions

While automatic view transitions are powerful, customization can enhance the experience:

• Define transition types with @view-transition { types: slide, forwards }.
• Use events like navigate, pagehide, visibilitychange, onload for the old page, and load, pageshow for the new page.

For instance:

@view-transition {
  types: slide, forwards;
}

To enable transitions in multi-page setups:

1. Ensure both pages have opted in with @view-transition { navigation: auto; }.
2. Use view-transition-name: root on the root element.
3. Handle navigation events for smooth swaps and reveals.

Some cool examples

Explore these CodePen demos to see view transitions in action:

• Bramus's Example
• Another Bramus Example
• Argyeink's Example

For more detailed implementation and examples, Bramus tells us to check out Google's SPA View Transitions Guide and the demos at view-transitions.netlify.app.

Conclusion

View transitions in CSS represent a significant step forward in creating fluid, engaging web experiences. Whether you're working on a single-page or multi-page application, these transitions can help you to enhance your site's UI/UX by making interactions more intuitive and visually appealing. I'm very curious and can't wait to start experimenting with view transitions and take my web development and design skills to the next level!