View Transitions

v2.2.13+

Inertia supports the View Transitions API, allowing you to animate page transitions.

The View Transitions API is a relatively new browser feature. Inertia gracefully falls back to standard page transitions in browsers that don’t support the API.

Enabling Transitions

You may enable view transitions for a visit by setting the viewTransition option to true. By default, this will apply a cross-fade transition between pages.

import { router } from '@inertiajs/vue3'

router.visit('/another-page', { viewTransition: true })

Transition Callbacks

You may also pass a callback to the viewTransition option, which will receive the standard ViewTransition instance provided by the browser. This allows you to hook into the various promises provided by the API.

import { router } from '@inertiajs/vue3'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

import { router } from '@inertiajs/react'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

import { router } from '@inertiajs/svelte'

router.visit('/another-page', {
    viewTransition: (transition) => {
        transition.ready.then(() => console.log('Transition ready'))
        transition.updateCallbackDone.then(() => console.log('DOM updated'))
        transition.finished.then(() => console.log('Transition finished'))
    },
})

Links

The viewTransition option is also available on the Link component.

import { Link } from '@inertiajs/vue3'

<Link href="/another-page" view-transition>Navigate</Link>

You may also pass a callback to access the ViewTransition instance.

import { Link } from '@inertiajs/vue3'

<Link
    href="/another-page"
    :view-transition="(transition) => transition.finished.then(() => console.log('Done'))"
>
    Navigate
</Link>

Global Configuration

You may enable view transitions globally for all visits by configuring the visitOptions callback when initializing your Inertia app.

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    // ...
    defaults: {
        visitOptions: (href, options) => {
            return { viewTransition: true }
        },
    },
})

Customizing Transitions

You may customize the transition animations using CSS. The View Transitions API uses several pseudo-elements that you can target with CSS to create custom animations. The following examples are taken from the Chrome documentation .

@keyframes fade-in {
    from { opacity: 0; }
}
@keyframes fade-out {
    to { opacity: 0; }
}
@keyframes slide-from-right {
    from { transform: translateX(30px); }
}
@keyframes slide-to-left {
    to { transform: translateX(-30px); }
}
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

You may also animate individual elements between pages by assigning them a unique view-transition-name. For example, you may animate an avatar from a large size on a profile page to a small size on a dashboard.

<template>
    <img src="/avatar.jpg" alt="User" class="avatar-large" />
</template>

<style>
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}
</style>

<!-- Dashboard.vue -->
<template>
    <img src="/avatar.jpg" alt="User" class="avatar-small" />
</template>

<style>
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}
</style>

export default function Profile() {
    return <img src="/avatar.jpg" alt="User" className="avatar-large" />
}

// CSS
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}

// Dashboard.jsx
export default function Dashboard() {
    return <img src="/avatar.jpg" alt="User" className="avatar-small" />
}

// CSS
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}

<img src="/avatar.jpg" alt="User" class="avatar-large" />

<style>
.avatar-large {
    view-transition-name: user-avatar;
    width: auto;
    height: 200px;
}
</style>

<!-- Dashboard.svelte -->
<img src="/avatar.jpg" alt="User" class="avatar-small" />

<style>
.avatar-small {
    view-transition-name: user-avatar;
    width: auto;
    height: 40px;
}
</style>

You may customize view transitions to your liking using any CSS animations you wish. For more information, please consult the View Transitions API documentation .