View transitions

Build & Deploy

Add animated page transitions with the browser's View Transition API. Pages cross-fade by default; customise the animation with CSS.

On this pageTurn on view transitions · Customise animations with CSS · Name elements that move between pages

Turn on view transitions

This step turns on view transitions. Pass viewTransitions: true to the adapter plugin.

React

// vite.config.ts
export default defineConfig({
  plugins: [voidPlugin(), voidReact({ viewTransitions: true })],
});

Vue

// vite.config.ts
export default defineConfig({
  plugins: [voidPlugin(), voidVue({ viewTransitions: true })],
});

Svelte

// vite.config.ts
export default defineConfig({
  plugins: [voidPlugin(), voidSvelte({ viewTransitions: true })],
});

Solid

// vite.config.ts
export default defineConfig({
  plugins: [voidPlugin(), voidSolid({ viewTransitions: true })],
});

Every navigation now animates. This covers Link clicks, router.visit() calls, and browser back and forward.

Per-link override

This step overrides the global setting on one link.

React

{
  /* Disable transition for this link */
}
<Link href="/settings" viewTransition={false}>
  Settings
</Link>;

{
  /* Enable for just this link (even if globally disabled) */
}
<Link href="/about" viewTransition>
  About
</Link>;

Vue

<!-- Disable transition for this link -->
<Link href="/settings" :view-transition="false">Settings</Link>

<!-- Enable for just this link (even if globally disabled) -->
<Link href="/about" view-transition>About</Link>

Svelte

<!-- Disable transition for this link -->
<Link href="/settings" viewTransition={false}>Settings</Link>

<!-- Enable for just this link (even if globally disabled) -->
<Link href="/about" viewTransition>About</Link>

Solid

{
  /* Disable transition for this link */
}
<Link href="/settings" viewTransition={false}>
  Settings
</Link>;

{
  /* Enable for just this link (even if globally disabled) */
}
<Link href="/about" viewTransition>
  About
</Link>;

You can also override it in code:

router.visit('/about', { viewTransition: true });
router.visit('/settings', { viewTransition: false });

Customizing with CSS

The default is a cross-fade. This step customizes it with the ::view-transition-old and ::view-transition-new pseudo-elements.

/* Faster transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

/* Slide instead of fade */
::view-transition-old(root) {
  animation: slide-out 0.3s ease-in;
}
::view-transition-new(root) {
  animation: slide-in 0.3s ease-out;
}

This step animates one element on its own, such as a hero image that morphs between pages. Give it a view-transition-name.

.hero-image {
  view-transition-name: hero;
}

TIP

View transitions are a progressive enhancement. Browsers without the API navigate instantly, with no errors.

Next steps

NextHead managementPreviousActions & formsZoneAll Build & Deploy pages