Desarrollo web Intermedio

De un Clic a una Obra Maestra: Animaciones de Cambio de Página en 10 Minutos con la View Transitions API

Aprende a crear transiciones suaves entre páginas sin frameworks, usando solo la View Transitions API nativa del navegador. Código listo, explicación paso a paso y diseño minimalista incluido.

Publicado: 27/10/2025 Por: Juan Felipe Orozco Cortés Duración: 10 minutos Nivel: Intermedio
Ir al contenido Ir a comentarios Volver a tutoriales
Imagen del tutorial De un Clic a una Obra Maestra: Animaciones de Cambio de Página en 10 Minutos con la View Transitions API
Imagen del tutorial De un Clic a una Obra Maestra: Animaciones de Cambio de Página en 10 Minutos con la View Transitions API
Imagen del tutorial De un Clic a una Obra Maestra: Animaciones de Cambio de Página en 10 Minutos con la View Transitions API
☰ Contenido del tutorial ⌄

El salto entre páginas es brusco. Un instante estás aquí, al siguiente… allá. Sin transición. Sin gracia. Sin alma. Hoy, eso termina.

No necesitas frameworks pesados, ni librerías externas, ni magia negra. Solo el poder nativo del navegador. Vamos a activar la View Transitions API: una herramienta del futuro que ya está aquí.

En 10 minutos convertirás cada cambio de página en una coreografía suave, elegante y fluida. Tu sitio no solo funcionará… bailará.

Stack que usaremos

  • HTML nativoMarcado mínimo, semántico y listo para animar vistas.
  • JavaScript modernoFetch, módulos ES y history.pushState para navegación sin recarga.
  • View Transitions APIDisponible en Chrome 111+ (soporte en expansión). Nos permite animar cambios de vista con CSS.

No hay frameworks ni dependencias externas. Todo sucede en el navegador.

El Plano de Ensamblaje

Este es el mapa de tu obra maestra animada:

transitions-site/
├── index.html          # Página principal (Escenario A)
├── about.html          # Página secundaria (Escenario B)
├── style.css           # Estilos + magia de transición
├── script.js           # Lógica de navegación suave
└── README.md           # (Opcional)

Esquema de la coreografía (alineado a tu estructura de archivos)

Vamos a coreografiar la transición de vistas respetando exactamente esta estructura: transitions-site/ con index.html, about.html, style.css, script.js y (opcional) README.md.

  • Fase 1: Montar el escenario — Crea el proyecto y enlaza todo.

    Prepara las dos páginas base y referencia las hojas de estilo y el script de navegación. Añade un contenedor principal (por ejemplo, <main id="app">) donde cambiaremos el contenido.

    Edita/crea: index.html, about.html (Escenarios A y B) · Enlaza style.css y script.js
  • Fase 2: Encender la chispa — Inicializa la View Transitions desde JavaScript.

    Implementa una pequeña función que use document.startViewTransition() con fallback para navegadores sin soporte. Esta función será el “interruptor” que envuelve cualquier cambio de contenido.

    Edita: script.js
  • Fase 3: Escribir el guión — Navegación sin recarga con fetch + history.pushState.

    Intercepta clics en enlaces internos, carga el HTML destino, extrae el contenido del <main id="app"> y reemplázalo dentro de una transición. Actualiza la URL con pushState y gestiona el botón “Atrás” con popstate.

    Edita: script.js
  • Fase 4: Vestir la escena — Define la animación con CSS.

    Personaliza la transición declarando estilos para ::view-transition-old(root) y ::view-transition-new(root) (opacidad, desenfoque suave, ligera traslación, duración y curva). Ajusta tipografía y layout básicos.

    Edita: style.css
  • Fase 5: Levantar el telón — Pruebas y afinación final.

    Abre index.html en el navegador, navega hacia about.html usando tus enlaces y verifica la fluidez. Ajusta duraciones y easing hasta que la coreografía se sienta natural. Documenta variaciones y notas.

    Usa: index.html, about.html · (Opcional) README.md para instrucciones

Fase 1 · El Escenario (Estructura básica)

Abrimos telón con lo mínimo indispensable: dos páginas planas, sin maromas ni dependencias. index.html será el escenario A y about.html el escenario B. Solo HTML puro; el objetivo es tener algo que ya “respire” por sí solo antes de encender la coreografía de transiciones.

Empezamos creando el escenario A. A continuación edita el archivo index.html y pega el código tal cual.

Consejo rápido: si haces pruebas abriendo el archivo desde tu disco (sin servidor), es mejor usar enlaces relativos como about.html. Si sirves tu sitio desde la raíz de un dominio, /about.html también funciona. 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Inicio | Transiciones Épicas</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main id="page-content">
    <h1>¡Bienvenido al Futuro!</h1>
    <p>Estás en la página de inicio. Haz clic abajo para viajar.</p>
    <a href="/about.html" class="nav-link">Ir a Sobre Nosotros</a>
  </main>
  <script type="module" src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Sobre Nosotros | Transiciones Épicas</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main id="page-content">
    <h1>Sobre Nosotros</h1>
    <p>Este es el futuro del web. Sin recargas. Solo transiciones.</p>
    <a href="/" class="nav-link">Volver al Inicio</a>
  </main>
  <script type="module" src="script.js"></script>
</body>
</html>
🔍 Nota: Ambas páginas comparten el mismo id="page-content". Esto es clave. La API anima lo que cambia dentro de ese contenedor; si el id no coincide, la transición no se aplicará como esperas.

Fase 2: La Chispa — Activar la View Transitions API

Hasta aquí solo hemos montado el escenario. Ahora encendemos la luz que hace que todo cobre vida. La View Transitions API se activa con una idea sencilla: envolver cualquier cambio de DOM dentro de document.startViewTransition(...). Si el navegador la soporta, verás una transición elegante; si no, el contenido cambia al instante y listo. Sin errores. Sin drama.

Abre script.js (ya está referenciado desde index.html) y pega este código. Define una pequeña utilidad que usaremos en los siguientes pasos para animar cualquier actualización de la página. 

// ¿Soporta View Transitions?
const supportsViewTransitions = 'startViewTransition' in document;

// Función para cambiar contenido sin recargar
async function navigateTo(url) {
  const response = await fetch(url);
  const html = await response.text();
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const newContent = doc.getElementById('page-content').innerHTML;

  if (supportsViewTransitions) {
    // ¡ACTIVAR LA TRANSICIÓN!
    document.startViewTransition(() => {
      document.getElementById('page-content').innerHTML = newContent;
      // Actualizamos la URL sin recargar
      history.pushState(null, '', url);
    });
  } else {
    // Fallback clásico (sin animación)
    document.getElementById('page-content').innerHTML = newContent;
    history.pushState(null, '', url);
  }
}

Fase 3: El Guión — Interceptar los clics y escribir la historia

La página ya tiene luz, pero aún cambia “a corte seco”. El truco de dirección es sencillo: evitamos la recarga completa cuando haces clic en un enlace de navegación, pedimos la siguiente página con fetch, extraemos su #page-content y lo intercambiamos con una transición. Así convertimos cada clic en una escena continua.

Abre script.js y añade este bloque al final del archivo. Incluye el interceptador de clics que pediste y la implementación completa de la función navigateTo (más un cargador auxiliar) para que todo funcione de inmediato.

Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.

← Volver a Tutoriales
Comunidad

Comentarios y valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!