Se usó la API de Cloud Translation para traducir esta página.

Casos de éxito de animaciones basadas en desplazamientos

Swetha Gopalakrishnan

Saurabh Rajpal

Animaciones basadas en desplazamientos son un patrón de UX común en la Web. Un control basado en desplazamientos está vinculada a la posición de desplazamiento de un contenedor de desplazamiento. Esto significa que, a medida que se desplaza hacia arriba o hacia abajo, la animación vinculada se arrastra hacia delante o hacia atrás. en una respuesta directa. Algunos ejemplos son efectos como el fondo con paralaje o indicadores de lectura que se mueven a medida que te desplazas.

Los desarrolladores suelen crear animaciones basadas en desplazamientos con JavaScript para responder a eventos de desplazamiento en el subproceso principal. Esto dificulta la creación de alto rendimiento basadas en desplazamientos que se sincronizan con el desplazamiento debido al de desplazamiento que se entregan de forma asíncrona y, a menudo, provoca bloqueos debido a están en el subproceso principal.

Sin embargo, como parte del nuevo Funciones de IU y CSS disponibles en los navegadores, ahora puedes crear animaciones declarativas basadas en desplazamientos. Con los cronogramas de desplazamiento y la vista Cronogramas, conceptos nuevos que se integran con API de Web Animations (WAAPI) y API de CSS Animations, ahora puedes tener una capa lisa y sedosa animaciones basadas en desplazamientos 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.

Navegadores compatibles

Origen

Tokopedia

Tokopedia reemplazó sus anteriores implementaciones personalizadas de JavaScript por Animaciones basadas en desplazamientos para optimizar el rendimiento de la página y mejorar la experiencia de navegación general en todo el 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 de desplazamiento de JavaScript convencionales y observamos que el uso promedio de la CPU se redujo del 50% al 2% mientras te desplazabas. Andy Wihalim: Ingeniero de software sénior, Tokopedia

Se animó el cambio de visibilidad de la barra adhesiva superior según el desplazamiento del usuario del anuncio.

Código

La siguiente implementación usa la función scroll() para establecer un desplazamiento anónimo. Cronograma de progreso para controlar el progreso de la animación CSS. El la visibilidad de la barra fija superior cambia según la posición de desplazamiento dentro del se definió animationRange.

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 la página de destino de actividades, que se muestra al inicio del embudo de conversión. Con las animaciones basadas en desplazamientos, pudimos reemplazar estas implementaciones personalizadas de JavaScript con CSS para lograr el mismo efecto.

Casos de uso

Galería de fotos con revelación de imágenes (para dispositivos móviles) y el Flujo de cobertura (para computadoras de escritorio).

Imagen de animación basada en desplazamiento que revela el efecto de cargar imágenes en la función "Things To Do" de redBus galería de fotos.

Código (dispositivos móviles)

En el ejemplo anterior, Tokopedia utilizó el progreso de desplazamiento anónimo cronograma. En el siguiente código, redBus usa el indicador de progreso de visualización. cronograma. La animación cambia los elementos opacity y clip-path de <img> dentro del animation-range definido dentro del elemento Desplazamiento principal, que es el desplazador 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%;
   }
`;

Estamos muy contentos de ver esta función, ya que es una combinación perfecta de rendimiento con mejor experiencia, lo que impulsa nuestros indicadores sobre la experiencia de página para SEO. Además de que la curva de aprendizaje mínima la convierte en una actividad imprescindible para todas las sitio web. También recibimos comentarios positivos y apoyo de otros equipos para aprovechar SDA para más recorridos de los usuarios.— Amit Kumar, Ingeniería sénior Administrador, redBus.

Bazar de políticas

Comparar planes de seguros es una acción clave repetida que toman los usuarios para guiar a sus en el proceso de toma de decisiones. Con animaciones basadas en desplazamientos, Policybazaar redujo el tamaño de los elementos de baja prioridad cuando el usuario se desplaza por la tabla. Esta dio como resultado una experiencia de desplazamiento fluida y, al mismo tiempo, una mejor legibilidad.

Con las animaciones basadas en desplazamientos, pudimos maximizar el espacio del viewport para el que el usuario compare planes, lo que garantice una lectura enfocada y ordenada experiencia.—Rishabh Mehrotra, directora de Design for Life Insurance BU, PolicyBazaar.

Animación basada en desplazamientos animate-timeline en la tabla de comparación del plan en Investment y Life LOB (línea de negocio).

Código

Al igual que en el ejemplo anterior de Tokopedia, Policybazaar usa el Función scroll() para establecer un cronograma de progreso de desplazamiento anónimo en controlar el progreso de la animación CSS. En este caso, reducir la fuente y atenuar el encabezado según la posición de desplazamiento dentro de los valores animation-range

@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 patrón común en todo el recorrido del usuario

Todas las empresas de comercio electrónico destacadas usaron animaciones basadas en desplazamientos en las páginas. con tarjetas, animaciones para llamar la atención del usuario sobre ellas . El Los siguientes ejemplos muestran efectos de desplazamiento en tarjetas en diferentes partes del usuario. del proyecto. Por lo general, se logra mediante un cronograma de progreso de vistas anónimo. 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)

Efecto flotante de animación mediante desplazamiento para cargar tarjetas de productos en la sección "Things To Do" de redBus página de destino.

Bazar de políticas (página de fichas de productos)

Desvanecimiento de animación basado en desplazamiento, atenuación de tarjetas de productos en la línea de negocio de Inversión y Vida (Línea de negocio).

Tokopedia (página de detalles del producto)

Animación de fundido de entrada y de salida mientras te desplazas por los productos en la lista.

Aspectos que debes tener en cuenta cuando uses la API de animaciones basadas en desplazamientos

En los navegadores no compatibles, es posible usar polyfill con animaciones basadas en desplazamientos. por ejemplo, con el Polyfill de la línea de tiempo de desplazamiento. Si lo haces, requieren pruebas adicionales para asegurarse de que funcionen bien con sus y que los navegadores que usan polyfill no experimentan animaciones experiencias con errores o bloqueos.

Desde CSS, puedes usar @supports para probar la compatibilidad del cronograma de animación antes de usar animaciones basadas en desplazamientos. Por ejemplo:

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

}

Recursos

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 IU y CSS, como transiciones de vistas, ventanas emergentes, consultas de contenedores y el selector has().

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