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

Yuriko Hirota

¿Cuáles son las novedades de las animaciones basadas en desplazamientos?

Las animaciones basadas en desplazamientos son una forma de agregar interactividad e interés visual a tu sitio web o aplicación web, que se activan según la posición de desplazamiento del usuario. Esta puede ser una excelente manera de mantener a los usuarios interesados y hacer que tu sitio web sea más atractivo visualmente.

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

• 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 jank.

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 del subproceso principal, lo que hace que las animaciones basadas en desplazamientos sean mucho más fáciles de implementar y también 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 fáciles y fluidas que pueden ser las animaciones basadas en desplazamientos con la nueva API.

La 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 JavaScript de clase.

El documento responde cada vez que ocurre el evento scroll para calcular qué porcentaje de scrollHeight 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 con 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 animation-timeline de CSS 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 del subproceso principal.

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 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 basada en desplazamientos creada por CyberAgent. Puedes ver que la foto aparece a medida que te desplazas.

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

El beneficio de la nueva API no solo se limita a CSS. También puedes crear animaciones basadas en desplazamientos fluidas con JavaScript. Echa un vistazo al 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 barra de progreso que se muestra en la demostración anterior de CSS con 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 del 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 basadas en desplazamientos declarativas.

Más demostraciones y recursos

Puedes consultar las diferentes implementaciones de la animación basada en desplazamientos 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.