Implementando View Transition con React

🚀 Qué es View Transition y por qué usarlo?

Las View Transitions son una nueva API de animación experimental en React 19 que nos permite animar transiciones entre elementos de manera fluida y eficiente, sin necesidad de bibliotecas adicionales como Framer Motion. Esta funcionalidad mejora la experiencia de usuario al hacer cambios de estado o de vista en una aplicación web.

Otro punto a tener en cuenta es que podemos habilitar el uso de la nueva API de View Transitions en Next.js a partir de la versión 15.2. Esto lo realizamos de la siguiente manera:

module.exports = {
  experimental: {
    viewTransition: true,
  },
};

📦 Instalación de dependencias

Asegúrate de que tu package.json tiene las versiones correctas:

"dependencies": {
    "next": "^15.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
"devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
  }

Implementando View Transition en React

Actualmente debemos importar el componente experimental llamado unstable_ViewTransition, así que podríamos realizar lo siguiente:

import { unstable_ViewTransition as ViewTransition } from "react";

🛠 Cómo lo utilizamos?

En el componente que queramos agregar la transición inicial lo envolveremos con el componente ViewTransition

<ViewTransition name="hero-image">
  <Image
    src="/images/example.webp"
    width={200}
    height={200}
    className="object-cover"
    alt="Picture of the author"
    priority
  />
</ViewTransition>

Luego volvemos a referenciar el mismo elemento pero en cualquier otra posición y diseño, por ejemplo a continuación transicionaremos la imagen del hero hacia la imagen del avatar de un post:

<ViewTransition name="hero-image">
  <Author username={post.author} />
</ViewTransition>

🔑 Cómo funciona name en ViewTransition?

La clave para que ViewTransition funcione es el atributo name. React usará este identificador para relacionar la versión inicial y la versión final del elemento y generar la animación de transición.

<ViewTransition name="profile-picture">
  <Image src="/images/avatar.webp" width={100} height={100} alt="Avatar" />
</ViewTransition>

Si más adelante en la misma página u otra vista referenciamos este mismo name, React aplicará una animación suave entre ambos estados.

🎥 Demo en acción

Aquí en mi sitio web puedes ver una demo en vivo de cómo funcionan las View Transitions

Puedes ver más ejemplos utilizados en mi repositorio de código

🚨 Limitaciones y consideraciones

• No todos los navegadores la soportan aún → Actualmente, View Transitions solo funcionan en navegadores basados en Chromium como Chrome 111+ y Edge.
• No funciona con elementos dentro de <canvas> o <iframe>.
• Solo funciona en el mismo árbol del DOM → Si el componente se desmonta completamente, la transición no ocurrirá.
• Puede cambiar en futuras versiones de React → Es una API experimental y su implementación podría cambiar en versiones futuras.

Cómo degradar en navegadores no compatibles?

Si el navegador no soporta View Transitions, podemos hacer un fallback manual:

if (!document.startViewTransition) {
  console.warn("View Transitions no está soportado en este navegador.");
  // Aquí puedes implementar una alternativa, como animaciones CSS o Framer Motion.
}

Gracias a la comunidad y al equipo de React por facilitarnos tanto el desarrollo de animaciones tan preciosas ✨