Casos de éxito de animaciones basadas en desplazamientos

Swetha Gopalakrishnan

Saurabh Rajpal

Las animaciones controladas por desplazamiento son un patrón de UX común en la Web. Una animación basada en el desplazamiento está vinculada 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 adelante o hacia atrás en respuesta directa. Algunos ejemplos son los 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 controladas por desplazamiento con JavaScript para responder a los eventos de desplazamiento en el subproceso principal. Esto dificulta la creación de animaciones basadas en el desplazamiento con un buen rendimiento y sincronizadas con el desplazamiento, ya que los eventos de desplazamiento se entregan de forma asíncrona y, a menudo, generan tirones debido a que se ejecutan en el subproceso principal.

Sin embargo, como parte de las nuevas funciones de CSS y de IU que se lanzarán en los navegadores, ahora puedes crear animaciones declarativas basadas en el desplazamiento. Con Scroll Timelines y View Timelines, nuevos conceptos que se integran con la API de Web Animations (WAAPI) y la API de CSS Animations existentes, ahora puedes tener animaciones basadas en el desplazamiento fluidas 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 controladas por desplazamiento para optimizar el rendimiento de sus páginas y mejorar la experiencia de navegación general en su embudo de conversiones de comercio electrónico.

Logramos reducir hasta el 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 la CPU se redujo del 50% al 2% durante el desplazamiento. Andy Wihalim, Ingeniero de software sénior, Tokopedia

Código

La siguiente implementación usa la función scroll() para establecer un cronograma anónimo del progreso del desplazamiento para controlar el progreso de la animación CSS. La visibilidad de la barra fija superior cambia según la posición de desplazamiento dentro del 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 en su página de destino de actividades, que se muestra al principio del embudo de conversión a todos los usuarios. Con las animaciones basadas en el desplazamiento, 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 Cover Flow (para computadoras).

Código (dispositivos móviles)

En el ejemplo anterior, Tokopedia usó el cronograma anónimo del progreso del desplazamiento. En el siguiente código, redBus usa el cronograma del progreso de visualización con nombre. La animación cambia los valores opacity y clip-path del elemento <img> dentro del animation-range definido en el elemento de desplazamiento principal más cercano, que, en este caso, es el elemento 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 mucho ver esta función, ya que es una combinación perfecta de rendimiento y una mejor experiencia, lo que impulsa nuestros indicadores de Experiencia de la página para el SEO. Además, la curva de aprendizaje mínima hace que sea una herramienta indispensable para todos los sitios web de comercio electrónico. También recibimos comentarios positivos y asistencia de otros equipos para aprovechar SDA en más recorridos del usuario.— Amit Kumar, gerente de Ingeniería sénior, redBus.

Policybazaar

Comparar planes de seguros es una acción clave repetida que realizan los usuarios para guiar su proceso de toma de decisiones. Con las animaciones controladas por desplazamiento, Policybazaar redujo el tamaño de los elementos de baja prioridad en respuesta al desplazamiento del usuario por la tabla. Esto generó una experiencia de desplazamiento fluida y mejoró la legibilidad.

Con las animaciones controladas por desplazamiento, pudimos maximizar el espacio del viewport para que el usuario comparara planes, lo que garantizó una experiencia de lectura enfocada y sin desorden.—Rishabh Mehrotra, jefe de diseño de la unidad de negocios de seguros de vida, PolicyBazaar.

Código

Al igual que en el ejemplo anterior de Tokopedia, Policybazaar usa la función scroll() para establecer un cronograma anónimo del progreso del desplazamiento para controlar el progreso de la animación 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 controladas por el desplazamiento como patrón común en todo el recorrido del usuario

Todas las empresas de comercio electrónico destacadas usaron animaciones controladas por desplazamiento en las páginas con tarjetas, y animaron las tarjetas para atraer la atención del usuario hacia ellas . En los siguientes ejemplos, se muestran efectos de desplazamiento en tarjetas en diferentes partes del recorrido del usuario. Por lo general, esto se logra con un cronograma anónimo del progreso de la vista para controlar el progreso de la animación 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 la ficha del producto)

Tokopedia (página de detalles del producto)

Aspectos que debes tener en cuenta cuando usas la API de Scroll-driven Animations

Es posible incluir animaciones basadas en desplazamientos con polyfill para navegadores que no las admiten, por ejemplo, con el polyfill de Scroll-timeline. Si lo haces, deberás realizar pruebas adicionales para asegurarte de que funcione bien junto con tu framework y de que los navegadores que usan el polyfill no experimenten fallas en la animación ni experiencias inestables.

Desde CSS, puedes usar @supports para probar la compatibilidad con animation-timeline antes de usar animaciones basadas en desplazamientos. Por ejemplo:

@supports (animation-timeline: scroll()) {

}

Recursos

• Demostraciones de animaciones controladas por desplazamiento
• Anima elementos al desplazarse con animaciones basadas en el desplazamiento
• Codelab: Introducción a las animaciones basadas en desplazamientos en CSS
• Extensión de Chrome: Depurador de animaciones controladas por desplazamiento
• Polyfill de Scroll-timeline
• ¿Quieres informar un error o sugerir 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 del uso de nuevas funciones de CSS y de IU, como View Transitions, Popover, Container Queries y el selector has().

• ¿Por qué son importantes las capacidades de la IU web para tu sitio de comercio electrónico?
• Casos de éxito de View Transitions
• Casos de éxito de la API de Popover
• Casos de éxito de Container Queries
• Casos de éxito del selector:has()