{/* */} The [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) provides a way to easily create animated transitions between different website views. Just like when you clicked on this blog post. Did you notice the `blog` word move down and to the right in a smooth animation? That's the View Transition API in action. ![View Transition](../blog/view-transitions.gif) In this article, I will show you how to use the View Transition API in Next.js to create smooth transitions like in the example above. Originally, transitions between states in single-page applications (SPA) tend to involve writing significant CSS and JavaScript to merely handle simple functionality as: - Loading and position of old and new content. - Animate old and new states to create the transition. - Remove the old content once the transition is complete. Causing the old and new content to be present in the DOM at the same time. We'll be using the [next-view-transitions](https://github.com/shuding/next-view-transitions) library to handle all of the above. It's a simple and easy-to-use library that allows you to build basic use cases of View Transitions in Next.js App Router. #### Prerequisites

Install the `next-view-transitions` package

> NOTE: The library is at the moment not compatible with React 19 and Next.js 15. Install the `next-view-transitions` library in your Next.js project by running `npm i next-view-transitions` or use any other package manager you prefer. Refer to the [documentation](https://github.com/shuding/next-view-transitions) for more information. Then, wrap your content with the `` component: ```tsx_src/app/layout.tsx import { ViewTransitions } from 'next-view-transitions' export default function Layout({ children }) { return ( {children} ) } ```

You're now ready to follow the steps below. #### A brief overview of how the library works - The `ViewTransitions` component provides a context (`ViewTransitionContext`) for managing the completion of view transitions throughout the application. - It then uses a custom hook (`useBrowserNativeTransitions`) to manage the browser's `startViewTransition` api to integrate with its native transition behaviour. - `useTransitionRouter` is a hook that enhances the `useNextRouter` from Next.js to incorporate view transitions. - The `` component wraps the Next.js `` component and uses the `useTransitionRouter` hook to access the enhanced router with view transition capabilities. The main thing we need to focus on when integrating view transitions in our Next.js app now, is the `` component and setting up some custom CSS. #### Usage When navigating between pages, use the `` component from `next-view-transitions` like so: ```tsx_src/app/page.tsx import { Link } from "next-view-transitions"; export default function Home() { return (

Hello

Go to Demo

); } ``` Using the `` component, will by default give the entire page a smooth `opacity` transition. Now, we can use the [view-transition pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to implement custom functionality. In our `globals.css` file, we'll define these: ```css_globals.css /* Define the element to transition */ .transition-text-element { view-transition-name: hello; } ::view-transition-old(hello) { animation: fade-out 0.8s ease-in-out; } /* Style the new (incoming) view */ ::view-transition-new(hello) { animation: fade-up 0.4s ease-in-out; } ``` - ::view-transition-old: Represents the outgoing view - ::view-transition-new: Represents the incoming view These pseudo-elements are targeted using the `view-transition-name` as we specified in the `transition-text-element` class. In the pseudo-elements, we are adding custom animations, `fade-out` and `fade-up`, which we'll add to the css file aswell. This will handle moving the element up and down on page navigation. ```css_globals.css @keyframes fade-out { 0% { transform-origin: center; transform: translateY(0) scale(1); opacity: 1; font-weight: 500; } 20% { transform-origin: center; transform: translateY(24px) scale(0.75); opacity: 0.5; } 40% { transform-origin: center; transform: translateY(24px) scale(0.75); opacity: 0.3; } 60% { transform-origin: center; transform: translateY(24px) scale(0.75); opacity: 0.2; } 100% { transform-origin: center; transform: translateY(24px); opacity: 0; } } @keyframes fade-up { 0% { transform-origin: center; transform: translateY(24px) scale(0.8); opacity: 0; } 20% { transform-origin: center; transform: translateY(24px) scale(0.8); opacity: 0.5; } 80% { transform-origin: center; transform: translateY(0) scale(1); opacity: 0.7; } 100% { transform-origin: center; transform: translateY(0) scale(1); opacity: 1; } } ``` Now, add another page to test out the custom view transition. In this example, we'll create a `app/demo/page.tsx` file, with the following content: ```tsx_app/demo/page.tsx import { Link } from "next-view-transitions"; export default function DemoPage() { return (

Go to Home

Hello

); } ``` This will result in the following simple example: ![Example Transition](../blog/hello-transition.gif) While this is a basic example, you can get creative with view transitions in your own projects. For more advanced implementations and examples, check out the [documentation](https://next-view-transitions.vercel.app/#demo). The complete source code for this article is available [here](https://github.com/jakobhoeg/view-transitions). I'd like to acknowledge [Lee Robinson](https://leerob.com) whose view transition implementation served as inspiration for my own implementation.

Blog