¿Qué novedades ofrecen las animaciones basadas en desplazamientos?
Las animaciones basadas en desplazamientos son una forma de agregar interés visual y interactividad a tu sitio web o aplicación web, que se activan mediante 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 provocó dos problemas importantes:
- El desplazamiento se realiza en un subproceso independiente y, por lo tanto, entrega eventos de desplazamiento de manera asíncrona.
- Las animaciones del subproceso principal están sujetas a bloqueos.
Esto hace que sea muy difícil o imposible crear animaciones basadas en desplazamientos que estén sincronizadas con el desplazamiento.
Ahora, presentamos un nuevo conjunto de APIs para admitir animaciones basadas en desplazamientos, las cuales 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 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.
Comparación entre la API de CSS de animaciones basadas en desplazamientos y el 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 cuánto porcentaje del 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 de CSS de línea de tiempo de animación convierte automáticamente una posición en un rango de desplazamiento en un porcentaje de progreso, lo que lleva a cabo todo el trabajo pesado.
Ahora bien, aquí está 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 es de esperarse, 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 gran trabajo de JavaScript y puede responder a las interacciones de desplazamiento del usuario.
El uso de CPU es completamente diferente en Herramientas para desarrolladores, 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 se atenúa a medida que te desplazas.
Comparación entre la nueva API de JavaScript de animaciones basadas en desplazamientos y JavaScript clásico
El beneficio de la nueva API no solo se limita a CSS. Con JavaScript, también puedes crear animaciones basadas en desplazamientos fluidas y fluidas. 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 mostró en la demostración anterior de CSS solo con 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 subprocesos principales, 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, lo que permite habilitar animaciones declarativas basadas en desplazamientos.
Más demostraciones y recursos
Puedes ver las diferentes implementaciones de la animación basada en desplazamientos en este sitio de demostración, en el que podrás 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.