Caso de éxito sobre el rendimiento de las animaciones basadas en desplazamientos

Yuriko Hirota

¿Qué novedades hay en las animaciones basadas en desplazamientos?

Las animaciones basadas en desplazamientos son una forma de agregar interactividad y el interés visual a tu sitio web o aplicación web, activados por la posición de desplazamiento del usuario. Esta puede ser una excelente manera de mantener la participación de los usuarios y hacer que tu sitio web sea más atractivo a nivel visual.

Antes, la única forma de crear animaciones basadas en desplazamientos era responder al evento de desplazamiento en el subproceso principal. Esto causó dos problemas principales:

• El desplazamiento se realiza en un subproceso independiente y, por lo tanto, entrega eventos de desplazamiento de forma asíncrona.
• Las animaciones del subproceso principal están sujetas a bloqueos.

Esto hace que sea imposible o muy difícil crear animaciones basadas en desplazamientos de alto rendimiento que estén sincronizadas con el desplazamiento.

Ahora presentamos un nuevo conjunto de APIs para admitir animaciones basadas en desplazamientos, que puedes usar desde CSS o JavaScript. La API intenta usar la menor cantidad posible de recursos de subprocesos principales, lo que hace que las animaciones basadas en desplazamientos sean mucho más fáciles de implementar y mucho más fluidas. Actualmente, la API de animaciones basadas en desplazamientos es compatible con los siguientes navegadores:

En este artículo, se compara el nuevo enfoque con la técnica clásica de JavaScript para mostrar lo sencillas y fluidas que pueden ser las animaciones basadas en desplazamientos con la nueva API.

API de CSS de animaciones basadas en desplazamientos en comparación con JavaScript clásico

La siguiente barra de progreso de ejemplo se compila con técnicas de clase de JavaScript.

El documento responde cada vez que se produce el evento scroll para calcular el porcentaje de scrollHeight al que se desplazó el usuario.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

En la siguiente demostración, se muestra la misma barra de progreso usando la nueva API con CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

La nueva función CSS animation-timeline convierte automáticamente una posición en un intervalo de desplazamiento en un porcentaje de progreso, por lo que realiza todo el trabajo pesado.

Ahora, esta es la parte interesante: supongamos que implementaste un cálculo muy pesado en ambas versiones del sitio web que consumiría la mayoría de los recursos de subprocesos principales.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Como era de esperar, la versión clásica de JavaScript se vuelve inestable y lenta debido a la unión de recursos del subproceso principal. Por otro lado, la versión de CSS no se ve afectada por el trabajo pesado de JavaScript y puede responder a las interacciones de desplazamiento del usuario.

El uso de la CPU es completamente diferente en DevTools, como se muestra en las siguientes capturas de pantalla.

En la siguiente demostración, se muestra una aplicación de animación impulsada por desplazamiento creada por CyberAgent. Verás que la foto se desvanece a medida que te desplazas.

Nueva API de JavaScript de animaciones impulsadas por el desplazamiento en comparación con el JavaScript clásico

El beneficio de la nueva API no solo se limita al CSS. También puedes crear animaciones fluidas basadas en desplazamientos con JavaScript. Observa el siguiente ejemplo:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Esto te permite crear la misma animación de la barra de progreso que se muestra en la demostración de CSS anterior usando solo JavaScript. La tecnología subyacente es la misma que la versión de CSS. La API intenta usar la menor cantidad posible de recursos de subproceso principal, lo que hace que las animaciones sean mucho más fluidas en comparación con el enfoque clásico de JavaScript.

Además, esta nueva API funciona en conjunto con la API de Web Animations (WAAPI) y la API de CSS Animations existentes para habilitar animaciones declarativas basadas en desplazamientos.

Más demostraciones y recursos

Puedes consultar las diferentes implementaciones de la animación impulsada por el desplazamiento a través de este sitio de demostración, en el que puedes comparar demostraciones con estas nuevas APIs de CSS y JavaScript.

Si te interesa obtener más información sobre las nuevas animaciones basadas en desplazamientos, consulta este artículo y la charla de I/O 2023.