What is the View Transition API?

The View Transition API is a web API designed to enable smooth and seamless transitions between different views or states within a web application. It allows developers to create fluid animations and transitions when navigating between different parts of a single-page application (SPA) or when changing the content within a view.

Key Features and Benefits:

1. Smooth Transitions: The API provides a standardized way to create smooth animations between different views, enhancing the user experience by making transitions appear more natural and engaging.
2. Declarative Syntax: Developers can define transitions in a declarative manner, specifying the start and end states, and letting the browser handle the complexities of animating between these states.
3. Improved Performance: By leveraging the browser’s rendering engine, the View Transition API can optimize the performance of animations, ensuring they run smoothly even on resource-constrained devices.
4. Reduced Boilerplate Code: The API abstracts away much of the low-level code required to create animations, reducing the amount of boilerplate code developers need to write and maintain.
5. Consistent Behavior: The API provides a consistent way to handle view transitions across different browsers and platforms, helping to ensure a uniform experience for users.

Once everything is configured, when you interact with a link the browser understands that you're trying to go to another place but in the same source (same domain), and starts to render it in the background. Then, once the next page is ready to be rendered, the browser creates the frames in-between the current state of the page you still are, and the initial state of the next page.

In that way, you are able to see a smooth transition between different pages!

From top left to bottom right, you can see the painting and animation process between the two different pages!

All based on custom configuration, you can notice that the items from the Project listed as a row go to their corresponding spaces in the full-page view:

• The title goes to the top left on the second page
• The description goes to the right
• The image goes to the bottom and scale up
• All the elements that are not exactly the same (as the image) passes from a process of fade-in and fade-out

Before going to the full implementation, I created a simplified demo first

Even though I wanted to apply that effect on more complex pages, it's always good when you are starting a new project to isolate the logic and test if what you're trying to do is achievable in a simpler scenario.

As this portfolio is built using Next.js, there are a lot of specificities related to Server Side Rendering (SSR), routing, caching, and now with Next 14 there are also the client and server components, so I started from the basics.

Starting from a new Next project, I deleted everything in the home page apart from the logo. Also, I created 2 other pages with the same structure, but having the logo in different places.

This is the final result:

Feel free to also check it out in the CodeSandbox I created!

https://codesandbox.io/p/devbox/view-transition-api-ns79h9

Dividing the code into pieces, first I'm importing the next-view-transitions library from @shuding:

Then, we use the imported component to wrap the main component from the application:

This is enough to enable the fade-in and fade-out effects between pages! But still, it's not possible to track the animation between different pages.

For that, it is necessary to use the attribute View Transition Name:

When adding it to the images on both pages, you're making sure to create a reference between them. With this, the browser will be aware of the pairing when tracking the animation.

This is the final result:

Notice that there's no manual animation configured, but yet the browser is able to track the movement of the logo based on the mapping I did before with the View Animation Name!

Super smooth, isn't it?