Las animaciones basadas en desplazamientos son un patrón común de UX en la Web. Una animación basada en desplazamientos se vincula a la posición de desplazamiento de un contenedor de desplazamiento. Esto significa que, a medida que te desplazas hacia arriba o hacia abajo, la animación vinculada se arrastra hacia delante o hacia atrás en respuesta directa. Algunos ejemplos son efectos como las imágenes de fondo con paralaje o los indicadores de lectura que se mueven a medida que te desplazas.
Por lo general, los desarrolladores crean animaciones basadas en desplazamientos a través de JavaScript para responder a eventos de desplazamiento en el subproceso principal. Esto dificulta la creación de animaciones basadas en desplazamientos de alto rendimiento que estén sincronizadas con el desplazamiento, ya que los eventos de desplazamiento se entregan de forma asíncrona y, a menudo, genera bloqueos por estar en el subproceso principal.
Sin embargo, como parte de las nuevas funciones de IU y CSS que están disponibles en navegadores, ahora puedes crear animaciones declarativas basadas en desplazamientos. Con los cronogramas de vistas y cronogramas de desplazamiento, los nuevos conceptos que se integran en la API de Web Animations (WAAPI) y la API de animaciones de CSS existentes, ahora puedes tener animaciones fluidas y fluidas basadas en el desplazamiento que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código. En este caso de éxito, descubre cómo Tokopedia, redBus y Policybazaar ya se benefician de esta nueva función.
Tokopedia
Tokopedia reemplazó sus implementaciones personalizadas anteriores de JavaScript por animaciones basadas en desplazamientos para optimizar el rendimiento de su página y mejorar la experiencia de navegación general en su embudo de conversión de comercio electrónico.
Logramos reducir hasta un 80% de nuestras líneas de código en comparación con el uso de eventos de desplazamiento convencionales de JavaScript y observamos que el uso promedio de CPU disminuyó de un 50% a un 2% durante el desplazamiento. Andy Wihalim, ingeniero de software sénior, Tokopedia
Código
En la siguiente implementación, se usa la función scroll() para establecer un cronograma de progreso de desplazamiento anónimo a fin de controlar el progreso de la animación de CSS. La visibilidad de la barra adhesiva superior cambia según la posición de desplazamiento dentro del elemento animationRange definido.
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus tiene diferentes animaciones para dispositivos móviles y computadoras de escritorio en su página de destino de tareas pendientes, que se muestra al comienzo del embudo de conversión a todos los usuarios. Con las animaciones basadas en desplazamientos, pudieron reemplazar estas implementaciones personalizadas de JavaScript por CSS para lograr el mismo efecto.
Casos de uso
Galería de fotos con Revelación de imágenes (para dispositivos móviles) y Flujo de portada (para computadoras de escritorio)
Código (dispositivos móviles)
En el ejemplo anterior, Tokopedia usó el cronograma de progreso anónimo del desplazamiento. En el siguiente código, redBus usa el cronograma de progreso de vista con nombre. La animación cambia el opacity y la clip-path del elemento <img> dentro del animation-range definido dentro de la barra de desplazamiento principal del elemento, que en este caso es la barra de desplazamiento de la galería de fotos.
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
Nos complace ver esta función, ya que es la combinación perfecta de rendimiento y mejor experiencia, lo que potencia nuestros indicadores sobre la experiencia de página para la SEO. Además, la curva de aprendizaje mínima hace que sea imprescindible en todo sitio web de comercio electrónico. También recibimos comentarios positivos y asistencia de otros equipos para aprovechar la SDA en más recorridos del usuario: Amit Kumar, gerente sénior de Ingeniería de redBus.
Bazar de políticas
La comparación de los planes de seguros es una acción clave repetida que realizan los usuarios para guiar su proceso de toma de decisiones. Con las animaciones basadas en desplazamientos, Policybazaar redujo el tamaño de los elementos de baja prioridad en respuesta al desplazamiento del usuario por la tabla. Esto dio como resultado una experiencia de desplazamiento elegante y, al mismo tiempo, mejoró la legibilidad.
Con las animaciones basadas en desplazamientos, pudimos maximizar el espacio del viewport para que el usuario compare planes, lo que garantiza una experiencia de lectura enfocada y ordenada.—Rishabh Mehrotra, director de Diseño para la BU de seguros de vida, PolicyBazaar
animate-timeline en la tabla del plan de comparación en la línea de negocio (línea de negocio) de inversión y ciclo de vida.Código
Al igual que en el ejemplo anterior de Tokopedia, Policybazaar usa la función scroll() para establecer un cronograma de progreso de desplazamiento anónimo a fin de controlar el progreso de la animación de CSS. En este caso, se reduce el tamaño de la fuente y se atenúa el encabezado según la posición de desplazamiento dentro del animation-range definido.
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
Animaciones basadas en desplazamientos como un patrón común en todo el recorrido del usuario
Todas las empresas de comercio electrónico destacadas utilizaron animaciones basadas en desplazamientos en páginas con tarjetas, que animaron tarjetas para atraer la atención del usuario . En los siguientes ejemplos, se muestran los efectos de desplazamiento en las tarjetas en diferentes partes del recorrido del usuario. En general, esto se logra con un cronograma de progreso de vista anónima para controlar el progreso de la animación de CSS personalizada, como se muestra en el siguiente fragmento de CSS.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus (página principal)
Policybazaar (página de fichas de productos)
Tokopedia (página de detalles del producto)
Aspectos que se deben considerar cuando se usa la API de animaciones basadas en desplazamientos
Es posible polyfills animaciones basadas en desplazamientos para navegadores que no son compatibles, por ejemplo, con el polyfill del cronograma de desplazamiento. Si lo haces, se requerirán pruebas adicionales para asegurarte de que funcione bien con tu framework y de que los navegadores que usen el polyfill no experimenten fallas en la animación ni experimenten bloqueos.
Desde CSS, puedes usar @supports para probar la compatibilidad con el cronograma de animación antes de usar animaciones basadas en desplazamientos. Por ejemplo:
@supports (animation-timeline: scroll()) {
}
Recursos
- Demostraciones de animaciones basadas en desplazamientos
- Cómo animar elementos cuando se desplazan con animaciones basadas en desplazamientos
- Codelab: Comienza a usar animaciones basadas en desplazamientos en CSS
- Extensión de Chrome: Depurador de animaciones basadas en desplazamientos
- Polyfill en el cronograma de desplazamiento
- ¿Quieres informar un error o usar una función nueva? Queremos conocer tu opinión.
Explora los otros artículos de esta serie en los que se explica cómo las empresas de comercio electrónico se beneficiaron con el uso de nuevas funciones de IU y CSS, como las transiciones de vistas, ventanas emergentes, consultas de contenedores y el selector has().