Casos de éxito de animaciones basadas en desplazamientos

Swetha Gopalakrishnan

Saurabh Rajpal

Las animaciones impulsadas por el 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 delante o hacia atrás en respuesta directa. Algunos ejemplos de esto 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 impulsadas por el desplazamiento con JavaScript para responder a eventos de desplazamiento en el subproceso principal. Esto dificulta la creación de animaciones basadas en el desplazamiento 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, generan interrupciones debido a que se encuentran en el subproceso principal.

Sin embargo, como parte de las nuevas funciones de CSS y la IU que llegan a los navegadores, ahora puedes crear animaciones declarativas basadas en el desplazamiento. Con las líneas de tiempo de desplazamiento y de vista, nuevos conceptos que se integran a la API de Web Animations (WAAPI) y a la API de CSS Animations existentes, ahora puedes tener animaciones fluidas impulsadas por el desplazamiento que se ejecutan en el 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 anteriores de JavaScript personalizadas con animaciones impulsadas por el desplazamiento para optimizar el rendimiento de la página y mejorar la experiencia de navegación general en su embudo de conversión 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 sénior de software, Tokopedia

Código

En la siguiente implementación, se usa la función scroll() para establecer un cronograma anónimo del progreso del desplazamiento para controlar el progreso de la animación de 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 animaciones diferentes para dispositivos móviles y computadoras de escritorio en su página de destino de cosas que hacer, que se muestra a todos los usuarios al principio del embudo de conversión. Con las animaciones basadas en el desplazamiento, pudieron reemplazar estas implementaciones de JavaScript personalizadas con CSS para lograr el mismo efecto.

Casos de uso

Galería de fotos con Image Reveal (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 de progreso de visualización nombrado. La animación cambia los opacity y clip-path del elemento <img> dentro del animation-range definido dentro del control de desplazamiento del ancestro más cercano del elemento, que es el control de desplazamiento de la galería de fotos en este caso.

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 una combinación perfecta de rendimiento y una mejor experiencia, lo que mejora nuestros indicadores de experiencia de la página para el SEO. Además, la curva de aprendizaje mínima lo convierte en un elemento imprescindible para todos los sitios web de comercio electrónico. También recibimos comentarios positivos y apoyo de otros equipos para aprovechar la SDA en más recorridos del usuario. Amit Kumar, gerente sénior de Ingeniería, 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 animaciones impulsadas por el desplazamiento, Policybazaar redujo el tamaño de los elementos de baja prioridad en respuesta al desplazamiento de la tabla por parte del usuario. Esto resultó en una experiencia de desplazamiento fluida y en una mejor legibilidad.

Con las animaciones impulsadas por el desplazamiento, pudimos maximizar el espacio del viewport para que el usuario compare los planes, lo que garantiza una experiencia de lectura enfocada y sin desorden. Rishabh Mehrotra, director de diseño de la BU 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 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 impulsadas por el desplazamiento como un patrón común en el recorrido del usuario

Todas las empresas de comercio electrónico destacadas utilizaron animaciones impulsadas por el desplazamiento en páginas con tarjetas, animando las tarjetas para atraer la atención del usuario . 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 de progreso de vista anónimo 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 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 usar un polyfill para las animaciones basadas en el desplazamiento en navegadores que no las admiten, por ejemplo, con el polyfill de Scroll-timeline. Si lo haces, esto requerirá pruebas adicionales para asegurarte de que funcione bien junto con tu framework y de que los navegadores que usan el polyfill no experimenten fallas de 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 impulsadas por el desplazamiento
• Anima elementos al desplazarse con animaciones basadas en el desplazamiento
• Codelab: Cómo comenzar a usar animaciones basadas en desplazamientos en CSS
• Extensión de Chrome: depurador de animaciones impulsadas por el desplazamiento
• Relleno de cronograma de desplazamiento
• ¿Quieres informar un error o 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 de usar nuevas funciones de CSS y IU, como las transiciones de vista, los pop-overs, las consultas de contenedores y el selector has().

• ¿Por qué las funciones de la IU web son importantes para tu sitio de comercio electrónico?
• Ver casos de éxito de Transitions
• Casos de éxito de la API de popover
• Casos de éxito de consultas de contenedores
• Casos de éxito del selector:has()