Las transiciones tienen numerosos beneficios para los usuarios, como ayudar a mantenerlos en contexto y reducir la percepción de latencia. Los desarrolladores quieren tener la capacidad de crear transiciones perfectas entre páginas para aumentar la participación de los usuarios en sus sitios.
Sin embargo, habilitar las transiciones de estado fue muy difícil, ya que los desarrolladores debían administrar los estados de dos elementos diferentes. Incluso algo como un simple fundido cruzado implica que ambos estados estén presentes al mismo tiempo. Esto plantea desafíos de usabilidad, como el manejo de interacciones adicionales con el elemento saliente. Para los usuarios de dispositivos de asistencia, hay un período en el que los estados antes y después están en el DOM al mismo tiempo. Además, es posible que los objetos se muevan por el árbol de un modo que sea óptimo visualmente, pero que esto pueda hacer que se pierda fácilmente la posición y el enfoque de lectura.
La API de View Transitions, que se lanzó en Chrome 111, permite crear transiciones fluidas y simples entre páginas. Te permite realizar el cambio de DOM sin ninguna superposición entre estados y tener una animación de transición entre los estados con vistas instantáneas.
Quizás te preguntes qué tan fácil es implementarla. ¿Qué tipo de casos de uso existen? ¿Cómo están usando otros desarrolladores las transiciones de vistas?
Este artículo explica la implementación de las transiciones de vistas en 4 sitios web diferentes: RedBus (viajes), CyberAgent (publicador de blogs o noticias), Nykaa (comercio electrónico) y PolicyBazaar (seguros), y cómo sus sitios web se beneficiaron de diferentes maneras con la API de View Transitions.
redBus
redBus, que forma parte del grupo MakeMyTrip, es un sitio web de reserva y venta de boletos de autobús con sede en Bangalore, India, con presencia en diferentes ubicaciones geográficas en todo el mundo. Fue uno de los primeros sitios web en implementar una experiencia con la API de View Transitions.
¿Por qué Redbus implementó transiciones de vistas?
El equipo de redBus cree firmemente en proporcionar una experiencia web unificada similar a la de una app, que sea lo más cercana posible a sus aplicaciones nativas. De hecho, habían implementado varias soluciones personalizadas a lo largo de los años. Por ejemplo, lanzaron animaciones personalizadas basadas en JavaScript y CSS para las transiciones de páginas, incluso antes de que se desarrollara la API de View Transitions. Sin embargo, eso significaba que tenían que ocuparse de la administración del rendimiento en segmentos más bajos de la red y los dispositivos, lo que en ocasiones generaba una experiencia diferencial con una estrategia de carga adaptable.
redBus usaba transiciones de vistas para múltiples recorridos del usuario. Por ejemplo, en la sección de autoayuda de su app para dispositivos móviles, que abrió páginas web en pestañas personalizadas de Chrome, y en el embudo de reserva de boletos de autobús donde los usuarios pasan de la página de la ficha del inventario a la página de pagos. En el último caso, las transiciones de vistas permitieron que la navegación entre páginas sea más fluida y hayan aumentado su porcentaje de conversiones. Esto fue el resultado de una mejor experiencia del usuario y un mejor rendimiento percibido mientras se ejecutaban las operaciones pesadas, como la recuperación del inventario disponible más actualizado.
Detalles técnicos de la implementación
redBus usa React y EJS como pila tecnológica de frontend, con una combinación de SPA y MPA en diferentes recorridos. En el siguiente extracto de código, se muestra cómo se usan las transiciones de vistas:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
En la siguiente CSS, slide-to-right, slide-to-left, slide-from-right y slide-from-left son fotogramas clave de animación CSS.
::view-transition-old(root) {
animation: 300ms 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: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Impacto en el negocio
redBus decidió implementar transiciones de vistas junto con iniciativas de mejora de INP en todo su sitio, lo que generó un 7% más de ventas. Amit Kumar, gerente sénior de Ingeniería de redBus, afirmó que las transiciones de vistas son realmente asombrosas para quienes quieren una mejor experiencia del usuario y una menor sobrecarga de mantenimiento.
Realizamos sesiones exhaustivas de comentarios de los usuarios, en las que incorporamos información valiosa de un grupo diverso de usuarios. Nuestro profundo conocimiento de nuestra base de usuarios (en autobuses y trenes) y sus necesidades, combinada con nuestra experiencia, nos llevó a pensar que esta función proporcionará un valor significativo desde el principio, sin la necesidad de realizar pruebas A/B. Las transiciones de vistas son un paso para cerrar la brecha entre la app y la Web con una experiencia de navegación fluida.
Anoop Menon, director de tecnología de redBus
CyberAgent
CyberAgent es una empresa de TI con sede en Japón que ofrece muchos servicios en línea, incluidos blogs y publicación de noticias.
¿Por qué CyberAgent implementó transiciones de vistas?
En el pasado, CyberAgent había considerado usar animaciones de CSS o un marco de trabajo para implementar transiciones animadas a fin de mejorar la experiencia del usuario, pero les preocupaba el bajo rendimiento de la renderización del DOM y la capacidad de mantenimiento del código. Cuando Chrome agregó compatibilidad con la API de transiciones de vistas, se entusiasmaron por usarla para crear transiciones de página atractivas que superaron estos desafíos.
CyberAgent implementó transiciones de vistas entre la lista y la página del blog. Aquí, observa cómo agregaron la transición de elementos a la imagen de héroe. Puedes visitar su sitio y experimentarlo en vivo hoy mismo.
También usaron consultas de medios para diseñar diferentes experiencias de animación para distintos dispositivos. En el caso de las páginas móviles, incluían transiciones de elementos, pero este efecto tenía demasiado movimiento en las versiones para computadoras de escritorio.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detalles técnicos de la implementación
CyberAgent usa Next.js para compilar su SPA. En el siguiente ejemplo de código, se demuestra cómo se usa la API de View Transition.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Consulta más código de Next.js de muestra.
Ver transiciones de MPA con tecnología de renderización previa
CyberAgent también probó nuestra nueva API de View Transitions para apps de varias páginas (MPA) (actualmente bajo la marca chrome://flags/#view-transition-on-navigation) en un servicio llamado Ameba News, que es un sitio de portal de noticias.
Las transiciones de vistas se usaron en dos lugares: el primero es para cambiar las categorías de las noticias, que se muestran en el siguiente video.
La segunda se encuentra entre la página de noticias destacadas, en la que se muestra un extracto del contenido, y cuando el usuario hace clic para Ver más detalles, se atenúa el resto del artículo.
Lo interesante es que solo agregaron animación a la parte que cambiará después de hacer clic en el botón. Este pequeño ajuste del diseño de la animación hace que la página de la MPA parezca más una SPA desde el punto de vista del usuario, con solo el contenido nuevo se anima:
A continuación, se muestra cómo lo hicieron: asignaron un view-transition-name diferente para las distintas partes de la página. Por ejemplo, asignaron un view-transition-name a la parte superior del artículo, otro a la parte inferior, y no agregaron ninguna animación a la parte superior.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Otro aspecto interesante del uso de la API de View transiciones por parte de CyberAgent es que usó un vínculo rápido para implementar fácilmente reglas de renderización previa en la página de detalles. Este es su código de muestra:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Puedes obtener más información sobre su implementación de vínculos rápidos en este artículo.
Testimonio
Kazunari Hara, líder en tecnología del servicio Ameba en CyberAgent, dijo que las transiciones de vistas podrían tener un impacto significativo en el negocio por dos motivos.
Primero, guían a los usuarios en la página. Las transiciones de vistas permiten centrar visualmente a los usuarios en el mensaje más importante y los ayudan a aprovechar al máximo la página web. Además, mejoran y enfatizan la marca con animaciones. CyberAgent tiene un diseño de animación designado para comunicar su marca. Con las transiciones de vistas, pueden implementar esta experiencia de marca sin agregar el costo de mantener bibliotecas externas.
View Transitions es una de mis APIs favoritas. La capacidad de agregar animaciones como una función estándar del navegador hace que las transiciones de vistas sean más fáciles de implementar y mantener en comparación con otras soluciones que dependen de bibliotecas. Esperamos implementar transiciones de vistas a más servicios para comunicar nuestra marca.
Kazunari Hara, director de tecnología de Ameba
Nykaa
Nykaa es la plataforma de comercio electrónico de moda y belleza más grande de la India. Su objetivo es que la experiencia de la Web móvil sea lo más cercana posible a la de la aplicación nativa. Cuando antes intentaban implementar animaciones de transición, tuvieron dificultades para escribir código JavaScript personalizado y complejo. Esto también tuvo un impacto marginal en el rendimiento de su sitio web.
¿Por qué Nykaa implementó transiciones de vistas?
Con la llegada de las transiciones de vistas, el equipo de Nykaa vio una oportunidad en la que estas transiciones estuvieran disponibles de forma nativa y que la UX de las transiciones de páginas se pudiera mejorar de manera significativa sin afectar el rendimiento. Nykaa está utilizando mucho las transiciones de vistas para pasar de la página de detalles del producto a la página de la ficha del producto.
Detalles técnicos de la implementación
Nykaa usó React y Emotion para crear su SPA. Puedes encontrar más códigos de muestra para usar las transiciones de vistas con React aquí.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS para la animación del panel lateral lateral:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Testimonio
Sunit Jindal, director de aplicaciones en Nykaa, afirmó que el mayor beneficio de la transición de vistas era la "percepción de la velocidad". Nykaa usó los efectos de brillo para esperar a que el contenido se cargara desde el backend, pero descubrió que mostrar el efecto de brillo no les proporcionaba a los usuarios cuánto tiempo necesitarían esperar a que se cargara el contenido. Con las transiciones de vistas, la transición en sí misma brindó a los usuarios la sensación de que "algo está a punto de suceder", lo que hizo que la espera fuera menos dolorosa.
Nykaa estaba muy entusiasmada con la UX recién mejorada de su página web con transiciones de vista y también está lista para implementarlas en páginas adicionales. Esto es lo que dijo su vicepresidente de Diseño:
Nos comprometemos a implementar transiciones de vistas en todas las próximas funciones cuando sea pertinente. Algunas áreas ya se identificaron y el equipo está invirtiendo activamente en ellas.
Krishna R V, vicepresidenta de Diseño
PolicyBazaar
PolicyBazaar, con sede en Gurgaon, es el agregador de seguros y una empresa multinacional de tecnología financiera más grande de la India.
¿Por qué PolicyBazaar implementó transiciones de vistas?
Dado que se trata de una empresa centrada en la Web, el equipo de PolicyBazaar siempre ha tenido como objetivo proporcionar la mejor experiencia del usuario posible en todos sus recorridos críticos del usuario. Era una práctica común implementar transiciones personalizadas con JavaScript y CSS incluso antes del lanzamiento de la API de View Transitions, ya que mejoraban la experiencia del usuario, creaban un flujo de navegación fluido y el atractivo visual general de sus sitios web.
Sin embargo, estas implementaciones personalizadas conllevaron un costo de retrasos ocasionales basados en el rendimiento, complejidades para el mantenimiento del código y compatibilidad poco óptima con los frameworks utilizados. La API de View Transitions los ayudó a superar la mayoría de estos desafíos, ya que les proporcionó una interfaz fácil de usar con beneficios de rendimiento disponibles de forma nativa.
PolicyBazaar usó transiciones de vistas entre diferentes elementos en sus recorridos previos a la cotización para que fuera emocionante para los compradores potenciales proporcionar los detalles necesarios para la compra de pólizas de seguros.
Detalles técnicos de la implementación
Usan un enfoque de framework híbrido en el que Angular y React predominan la mayor parte de su base de código. Este es el extracto de VT de su código escrito en Angular y compartido por Aman Soni (desarrollador líder de frontend de PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Testimonio
Rishabh Mehrotra, jefe de Diseño (Life BU), afirmó que las transiciones de vistas desempeñaron un papel importante a la hora de mejorar la experiencia del sitio web para los usuarios, ya que mejoraron la usabilidad, la participación y la satisfacción general. Ayudó a proporcionar una navegación fluida, interacción guiada, menor carga cognitiva, estética moderna y mucho más.
Mejorar la experiencia web es un objetivo primordial para PB, y VT demostró ser una herramienta decisiva para lograr esto con una fluidez extraordinaria. Su gran atractivo entre nuestra comunidad de desarrolladores y la base de usuarios ha infundido a nuestro equipo una sensación de entusiasmo. Al contemplar su integración en diversos POD, anticipamos un impacto positivo de gran alcance en los niveles de satisfacción y la excelencia operativa.
Saurabh Tiwari (director de Tecnología, PolicyBazaar)
Próximos pasos
¿Te interesa probar las transiciones de vistas? Estos son algunos recursos con los que puedes obtener más información: