Anime js scroll: animaciones de desplazamiento en la web

Las animaciones basadas en el desplazamiento son un elemento clave para mejorar la experiencia del usuario (UX) en sitios web modernos. Con la llegada de nuevas APIs en navegadores como Chrome 115, crear animaciones suaves y fluidas que se sincronizan con el desplazamiento se ha vuelto más sencillo y eficiente. Este artículo explora las posibilidades de Anime JS Scroll, combinando la potencia de la biblioteca Anime.js con las nuevas funciones de cronogramas de desplazamiento y cronogramas de vista.

Animaciones Basadas en Desplazamiento : Un Nuevo Paradigma

Anteriormente, las animaciones de desplazamiento se manejaban con eventos scrollen el hilo principal, lo que llevaba a problemas de rendimiento y falta de sincronización. Las nuevas APIs de cronogramas de desplazamiento y de vista ( scroll timelinesy view timelines) solucionan esto al permitir animaciones declarativas, mejorando significativamente el rendimiento y la suavidad.

Cronogramas de Desplazamiento (Scroll Timelines)

Un cronograma de desplazamiento vincula una animación al progreso de la posición de desplazamiento de un contenedor. Esto permite animaciones que se ejecutan en función de cuánto se ha desplazado el usuario. Se puede controlar mediante CSS o JavaScript.

Creando Cronogramas de Desplazamiento en CSS

La función scroll()en la propiedad animation-timelinecrea un cronograma de desplazamiento anónimo. Se puede especificar el contenedor de desplazamiento ( root, nearest, self) y el eje ( block, inline, x, y).

@keyframes animate-it { ... } .subject { animation: animate-it linear; animation-timeline: scroll(root block); }

Para un mayor control, se pueden crear cronogramas de desplazamiento con nombre usando scroll-timeline-namey scroll-timeline-axisen el contenedor de desplazamiento.

.scroller { scroll-timeline-name: --my-scroller; scroll-timeline-axis: inline; } .scroller .subject { animation: animate-it linear; animation-timeline: --my-scroller; }

Creando Cronogramas de Desplazamiento en JavaScript

La clase ScrollTimelineen JavaScript permite crear y controlar cronogramas de desplazamiento de forma programática.

const tl = new ScrollTimeline({ source: document.documentElement, }); $el.animate({ opacity: [0, 1], }, { timeline: tl, });

Cronogramas de Vista (View Timelines)

Los cronogramas de vista vinculan una animación a la posición relativa de un elemento dentro de su contenedor de desplazamiento. Esto permite animaciones que se activan cuando un elemento entra o sale de la vista.

Creando Cronogramas de Vista en CSS

La función view()en la propiedad animation-timelinecrea un cronograma de vista anónimo. Se puede especificar el eje ( block, inline, x, y) y un insetpara ajustar los límites de visibilidad.

@keyframes reveal { from { opacity: 0; } to { opacity: 1; } } img { animation: reveal linear; animation-timeline: view(); }

También se puede controlar el rangede la animación con animation-range, especificando cuándo debe comenzar y terminar la animación en relación a la entrada o salida del elemento de la vista ( entry, exit, cover, etc.).

Creando Cronogramas de Vista en JavaScript

Similar a los cronogramas de desplazamiento, la clase ViewTimelinepermite crear y controlar cronogramas de vista en JavaScript. Se especifica el subject(el elemento a observar), el axisy el inset.

const tl = new ViewTimeline({ subject: document.getElementById(ubject'), }); $el.animate({ opacity: [0, 1], }, { timeline: tl, rangeStart: 'entry 25%', rangeEnd: 'cover 50%', });

Anime.js y las Animaciones de Desplazamiento

Anime.js es una potente biblioteca JavaScript para crear animaciones. Su integración con las nuevas APIs de cronogramas de desplazamiento y vista permite crear animaciones de desplazamiento complejas y personalizadas. Al usar Anime.js, puedes controlar con precisión los detalles de tus animaciones, como la duración, la función de aceleración y las propiedades a animar.

Un ejemplo sencillo de cómo integrar Anime.js con un cronograma de desplazamiento:

const timeline = new ScrollTimeline({ source: document.documentElement }); anime({ targets: '.element-to-animate', translateY: [200, 0], opacity: [0, 1], duration: 1000, easing: 'easeInOutQuad', timeline: timeline });

Este código animará el desplazamiento vertical ( translateY) y la opacidad ( opacity) de los elementos con la clase 'element-to-animate' a medida que el usuario se desplaza por la página. La duración de la animación es de 1 segundo (1000 milisegundos), y se usa una función de aceleración easeInOutQuad.

Ejemplos de Uso de Anime JS Scroll

Las posibilidades con Anime JS Scroll son ilimitadas. Aquí hay algunos ejemplos de cómo se puede usar:

• Parallax Scrolling: Crear efectos de paralaje donde los elementos se mueven a diferentes velocidades en relación con el desplazamiento.
• Indicadores de Progreso: Mostrar un indicador visual del progreso de desplazamiento en la página.
• Animaciones de Revelación: Animar la aparición de elementos a medida que el usuario se desplaza hacia ellos.
• Animaciones de Transición: Crear transiciones suaves entre secciones de la página.
• Animaciones Interactivas: Combinar las animaciones de desplazamiento con eventos de interacción del usuario para una experiencia más dinámica.

Tabla Comparativa: CSS vs. JavaScript

Consideraciones de Rendimiento

Si bien las nuevas APIs mejoran el rendimiento, es importante optimizar el código para evitar problemas de rendimiento en dispositivos de baja potencia. Minimiza el número de animaciones y optimiza la complejidad de las mismas. La pre-renderización de elementos que se van a animar puede también mejorar significativamente el rendimiento.

Conclusión

La combinación de Anime JS Scroll, las nuevas APIs de cronogramas de desplazamiento y vista, y las capacidades de Anime.js, abre un entorno de posibilidades para crear experiencias de usuario web enriquecidas y atractivas. Con práctica y optimización, puedes crear animaciones de desplazamiento suaves, eficientes y visualmente impresionantes.

Si quieres conocer otros artículos parecidos a Anime js scroll: animaciones de desplazamiento en la web puedes visitar la categoría Anime.