Unlocking the Power of View Transitions API

What is the View Transitions API?

The web offers endless possibilities for presenting and displaying content, with various tools and technologies at our disposal. One effective way to enhance user experience is by incorporating animations and transitions into our applications. While third-party tools like Animate.css and GSAP can get the job done, there’s a more exciting option on the horizon: the View Transition API.

The View Transitions API, formerly known as the Shared Element Transitions API, is designed to simplify the creation of transitions and animations in single-page applications (SPAs). Currently, it only supports SPAs, but its potential is vast. With this API, developers can define custom animations and transitions, leveraging the browser’s default animation properties or crafting unique effects.

How Does the View Transitions API Work?

Behind the scenes, the browser takes a screenshot of the current page state and handles the transition as the page shifts to another state. This process involves updating the DOM and applying the necessary logic to animate between states. The browser then applies a cross-fade as the default transition between the previous and current states.

Breaking Down the Pseudo-Elements

When the API is active, it constructs a pseudo-element tree consisting of:

• ::view-transition: The container element for other pseudo-elements
• ::view-transition-group: Responsible for animating size and position between states
• ::view-transition-image-pair: Holds the screenshot of old and new states
• ::view-transition-old(root): Holds the screenshot of the previous state
• ::view-transition-new(root): Holds the representation of the new state

Customizing Transitions with CSS

Developers can use CSS animations to customize the transitions, opting for the default cross-fade or creating more complex effects. The browser handles the heavy lifting of tracking and calculating changes between states, ensuring a seamless and performant experience.

.view-transition {
  transition: opacity 0.5s;
}

.view-transition::view-transition-old(root) {
  opacity: 0;
}

.view-transition::view-transition-new(root) {
  opacity: 1;
}

A Simple Demo App

To demonstrate the View Transitions API in action, let’s create a basic to-do app with HTML, CSS, and JavaScript. The app features two sections: “Not Done” and “Done.” Tasks can be marked as completed by clicking a button, triggering a smooth transition effect as the task moves from one section to another.

Setting Up the JavaScript Aspect

The demo app’s JavaScript code initializes a task variable, determines the destination based on the task’s completion state, and adds a “task-done” class to hide the button when a task is marked as completed. It also checks for browser support of the View Transitions API and creates a taskTransition instance using the createDocumentTransition method to trigger the transition.

const task = document.querySelector('.task');
const doneButton = document.querySelector('.done-button');

doneButton.addEventListener('click', () => {
  task.classList.add('task-done');
  const taskTransition = document.createDocumentTransition();
  taskTransition.start();
});