Cómo animar transiciones de página en React Router
Guía práctica para animar transiciones entre rutas en React Router: View Transitions API frente a AnimatePresence, retención de scroll y rendimiento.
Idea clave
Para animar transiciones de página en React Router, utiliza la View Transitions API nativa del navegador con startTransition() o envuelve las salidas de ruta en AnimatePresence de Framer Motion mediante useLocation().key. Mantén las animaciones de salida por debajo de 200 ms para agilidad percibida, preserva la posición de scroll y evita duplicar árboles pesados del DOM simultáneamente.
El desafío del desmontaje de páginas
React Router desmonta de inmediato el componente de la página saliente al cambiar de ruta. Para que una animación de salida se reproduzca, los nodos del DOM deben conservarse temporalmente hasta finalizar el movimiento. Herramientas como Framer Motion logran esto mediante AnimatePresence rastreando la clave de ruta.
View Transitions API nativa en React Router
Las versiones modernas de React Router admiten de forma nativa la View Transitions API mediante la propiedad viewTransition en los enlaces. Este mecanismo toma una captura de la página antigua y anima hacia la nueva utilizando pseudoelementos, eliminando la duplicación en memoria de árboles de React.
- Usa document.startViewTransition() o la prop viewTransition en Link
- Mantén la duración total por debajo de 250 ms para navegación ágil
- Ubica barras de cabecera y navegación permanentes fuera de las rutas animadas
- Restaura la posición de scroll inmediatamente al cambiar de página
Transiciones con elementos compartidos
Al navegar desde una cuadrícula hacia una vista de detalle, expandir la tarjeta hacia la cabecera crea un contexto espacial muy valioso. La View Transitions API resuelve esto con la propiedad CSS view-transition-name aplicada al elemento de origen y de destino.
Movimiento reducido y navegación instantánea
La navegación nunca debe causar mareos. Con prefers-reduced-motion activo, anula completamente las animaciones de transición para que las páginas cambien al instante.
Principios clave para recordar
- Haz que la animación de salida sea más rápida que la de entrada
- Adopta la View Transitions API para evitar duplicar árboles de componentes en memoria
- Mantén la interfaz fija (cabeceras, menús) fuera del contenedor de transición
- Desactiva las animaciones de ruta ante preferencias de movimiento reducido
Preguntas frecuentes
Fuentes
- View Transitions API — MDN Web Docs
- React Router View Transitions — Remix / Shopify