Bibliotecas de animación de JavaScript: 10 opciones populares

Me encanta experimentar con varios efectos de animación, en particular aquellos que son simples y se pueden implementar con CSS. Pero, si miramos el panorama más amplio, las animaciones CSS solo te llevarán hasta ahí . Y, si desea crear experiencias de usuario complejas e interactivas, tarde o temprano tendrá que cambiar a JavaScript.

La principal ventaja de usar JavaScript para los efectos de animación es que puedes controlar mucho más la lógica de la animación. Esto incluye la fluidez de las transiciones, el control del estado y la respuesta del DOM, pero también el uso de gráficos 2D y 3D gracias a WebGL.

Los tipos de bibliotecas de animación de JavaScript

Entonces, debido a que las bibliotecas de animación JS vienen en muchas formas, realmente ayuda a reducir el área específica de enfoque. Muchos de los motores y marcos no solo se usan para cosas de front-end, sino también para crear juegos y crear otro contenido interactivo.

Para este resumen específico, mi atención se centra en las bibliotecas que se usan con mayor frecuencia en el desarrollo front-end, ya sea solas o junto con cualquiera de los marcos actuales.

A su debido tiempo, consideraré agregar más bibliotecas a esta lista que sean de menor escala pero que aún brinden formas significativas de agregar animaciones interactivas a sus proyectos.

Cada biblioteca tiene enlaces a su sitio web y página de GitHub. También agregué un ejemplo de CodePen que puede ejecutar desde esta página y recursos adicionales, que son tutoriales o guías en video.

#1 – Tres.js

Three.js es la biblioteca de referencia para crear efectos animados en 3D que utiliza en el desarrollo de sitios web creativos. Three.js elimina la necesidad de que los desarrolladores aprendan sobre WebGL y, en cambio, pueden centrarse en crear efectos 3D interactivos sin la complejidad.

En la gama alta, Three.js se usa para crear experiencias virtuales interactivas, como Mozilla Hubs. Además, la biblioteca también se utiliza a menudo para crear experiencias de página de destino inmersivas. Editores y editoriales de clase mundial han utilizado Three.js durante años para crear páginas basadas en datos con actualizaciones dinámicas.

Si visita la página de inicio, hay una gran cantidad de proyectos destacados en la lista, lo que debería brindarle mucha inspiración/claridad sobre cómo se usa esta biblioteca en los entornos cotidianos.

Animación de ejemplo de Three.js

Vea el fondo de ondas de línea de malla de lápiz: TRES.js por CP Designer (@cpandya) en CodePen.

Recursos adicionales de Three.js

• Cómo construimos el globo de GitHub
• Efecto de distorsión de píxeles con Three.js

#2 – Anime.js

Anime.js de Julian Garnier es probablemente la segunda biblioteca más conocida para integrar animaciones en proyectos basados ​​en la web. Su popularidad se debe a que tiene herramientas integradas para ayudar a acelerar el proceso de animación de elementos CSS, SVG y DOM.

Por ejemplo, puede apuntar a selectores de CSS específicos y luego aplicar una lógica de animación refinada a través de JavaScript, en lugar de escribir los @keyframes usted mismo.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Solo con el fragmento anterior, puede crear un efecto que se vea así:

Si tuviera que hacer esto con CSS, necesitaría seleccionar cada bloque de cuadrícula individual y escribir una lógica separada para él. No solo es poco práctico, sino que también es mucho trabajo. En la página de documentos de Anime.js, encontrará muchos ejemplos similares. Y, la demostración a continuación va un paso más allá para mostrar cómo se puede usar esta biblioteca en el desarrollo de front-end moderno.

Animación de ejemplo de Anime.js

Vea la animación del logotipo Pen anime.js de Julian Garnier (@juliangarnier) en CodePen.

Recursos adicionales de Anime.js

• Tutorial de Anime.js: motor de animación de JavaScript en 10 minutos
• Animación de interfaz de usuario con Anime.js

#3 – Movimiento emergente

Popmotion es una biblioteca de animación de bajo nivel escrita en TypeScript. También es la biblioteca que alimenta la popular biblioteca Framer Motion (la tenemos listada en este artículo) que se usa en los proyectos de React. Al no tener opiniones, puede usar Popmotion para integrar efectos personalizados escribiendo funciones adicionales que desee usar.

Como su nombre lo indica, Popmotion es particularmente bueno para animar elementos de la interfaz de usuario mediante el uso de varias animaciones basadas en movimiento. Esto incluye efectos como aceleración, resortes, fotogramas clave y efectos de transición más complejos. El siguiente ejemplo hace un buen trabajo al mostrar la aplicación práctica de los efectos de animación para elementos componentes.

Animación de ejemplo de movimiento pop

Vea la demostración de Pen Popmotion por Arden (@aderaaij) en CodePen.

Recursos adicionales de Popmotion

• Visualice el algoritmo Pancakes con React y Popmotion.io
• Agregue animaciones de primavera a su aplicación angular con popmotion

#4 – mo.js

Mo.js se centra en los gráficos en movimiento y se destaca por proporcionar una estructura de código simple que puede implementar en proyectos independientes, pero también junto con marcos como React.

Y, debido a que Mo.js viene con su propia API declarativa, puede controlar cada paso de la animación. Esto incluye definir no solo la lógica de lo que desea lograr, sino también cómo va a llegar allí. La biblioteca incluye componentes prefabricados y ejemplos que se adaptan para experiencias de usuario visualmente ricas.

Aquí hay un fragmento de muestra:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Como puede ver, gran parte de la lógica está predefinida. Entonces, en lugar de tener que proponer sus propias ideas, puede tomar nota de las propiedades proporcionadas y construir su camino. La sección de tutoriales en los documentos tiene bastantes ejemplos de aplicaciones prácticas, particularmente efectos que agregan animaciones minúsculas pero significativas a los elementos cotidianos de la página web.

mo.js ejemplo de animación

Vea los efectos de desplazamiento de Pen Link con mo.js de Mike Quinn (@mprquinn) en CodePen.

mo.js Recursos adicionales

• Cómo usar MoJS con React
• Familiarizarse con MoJS

#5 – p5.js

p5.js es la implementación de JavaScript de Processing, un "lenguaje" separado destinado a los artistas visuales. A diferencia de algunos de los ejemplos que hemos visto hasta ahora, p5.js es una biblioteca de animación universal que brinda soluciones no solo para aplicaciones prácticas sino también para proyectos más sólidos y complejos. Esto incluye soporte completo para efectos 2D y 2D.

En cuanto al uso de p5.js en proyectos de sitios web, la biblioteca abre una vía para la creatividad en profundidad. Por ejemplo, puede iniciar rápidamente efectos como una cortina de humo, árboles animados y páginas de destino basadas en datos con las que los usuarios pueden interactuar.

Tiene que hacer todos los dibujos usted mismo, pero con la cantidad de recursos disponibles para p5.js, creo que encontrará que no es tan difícil comenzar. Y no hace falta decir que la comunidad detrás de estos dos proyectos está muy involucrada.

Animación de ejemplo p5.js

Ver Pen P5.JS Twist and Turn. por Sdsmnc (@supastrocat) en CodePen.

p5.js Recursos adicionales

• Procesamiento y p5.js
• Puestas de sol y estrellas fugaces en p5.js

#6 – Movimiento

React es tan popular que tiene sentido que tenga su propia biblioteca de animación. Framer Motion viene con una API preconstruida que permite a los desarrolladores de React simplificar el proceso de creación de componentes animados, pero también alivia algunos de los obstáculos de tener que aprender CSS y sus propiedades de animación independientes. Y es bastante fácil trabajar con él.

Un fragmento de ejemplo:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Las animaciones en Framer están definidas por las propiedades de motion y animate . Esto le permite seleccionar componentes completos y sus elementos internos, que luego puede enriquecer con su lógica de animación personalizada. El artículo Smashing de Nefe Emadamerho-Atori en la sección de recursos es un excelente punto de partida para ver cómo funciona Framer Motion.

Animación de ejemplo de movimiento

Vea el botón de la mira láser del lápiz de codebro (@codebro) en CodePen.

Recursos adicionales de la moción

• Presentamos Framer Motion
• Animaciones receptivas con Framer Motion

#7 – GSAP

Últimamente he visto mucho el arte de GSAP compartido en Twitter. Pero no es una sorpresa. Muchas de las animaciones y efectos dinámicos que vemos en proyectos creativos han sido posibles gracias al robusto motor GSAP.

La biblioteca no solo está optimizada para el rendimiento, sino que también es altamente compatible con sus tecnologías favoritas. Eso incluye marcos como React & Vue, pero también bibliotecas como jQuery, con soporte adicional para navegadores web móviles y actualizados .

Debido a que GSAP puede consultar y animar prácticamente cualquier tipo de elemento web (desde CSS hasta Canvas y objetos DOM), puede usarlo para algo tan simple como un efecto giratorio, o hacer todo lo posible y crear experiencias de sitio web verdaderamente dinámicas.

La sección Showcase tiene cientos de proyectos de ejemplo en los que han trabajado los desarrolladores. Échale un vistazo para inspirarte, pero también para ver lo que es posible con esta biblioteca.

Animación de ejemplo de GSAP

Vea la introducción de Pen Hulu Originals por Hyperplexed (@Hyperplexed) en CodePen.

Recursos adicionales de GSAP

• Increíbles técnicas de animación con GSAP
• Creación de secuencias elaboradas de animación de sitios web: tutorial de GSAP 3

#8 – Papel.js

Paper.js es una biblioteca de animación con un enfoque estricto en la animación de gráficos vectoriales. Este enfoque le permite no solo efectos estáticos, sino también experiencias dinámicas interactivas. En particular, Paper.js es popular entre los proyectos de animación en los que el usuario puede arrastrar objetos, reorganizarlos y proporcionar entradas personalizadas.

Los objetos se pueden categorizar a través de capas, y cada capa tiene una especificación de animación personalizada. Esto es útil cuando trabaja en estructuras complejas, lo que le permite eliminar/deshabilitar ciertas capas a menos que el usuario lo solicite.

Animación de ejemplo de Paper.js

Vea los vasos de llenado de bolígrafos: Paper.js de Fiorald Ismaili (@Fiorald) en CodePen.

Recursos adicionales de Paper.js

• Borrado de vectores de Paper.js
• Ondas en Paper.js

#9 – Animaciones web

Esta biblioteca es un puerto de JavaScript directo de la API de animación web. La biblioteca se integra directamente con la Element.animate() , lo que le permite usar funciones de animación típicamente escritas con lógica CSS. Los autores lo explicaron diciendo:

“Una implementación de JavaScript de la API de animaciones web que proporciona funciones de animación web en navegadores que no lo admiten de forma nativa. El polyfill recurre a la implementación nativa cuando hay una disponible”.

Animaciones web Ejemplo de animación

Vea las animaciones imperativas de lápiz de Sam Thorogood (@samthor) en CodePen.

Animaciones web Recursos adicionales

• API de animaciones web: API web | MDN
• Animaciones Web Nivel 2 | W3C

#10 – Protón

Los efectos de partículas definitivamente están a la altura de las tendencias modernas de diseño web. Los diseñadores no solo los implementan para efectos de fondo, sino también para transiciones interesantes e incluso presentaciones para proyectos creativos. La biblioteca Proton se adapta específicamente a las necesidades de escalar rápidamente efectos de partículas creativas.

Puede hacer cosas como crear efectos de chispa e interacciones basadas en colisiones, pero también transformar texto en experiencias de animación nuevas y emocionantes.

Animación de ejemplo de protones

Vea Pen my-emitter de matsu7089 (@matsu7089) en CodePen.

Recursos adicionales de protones

• Ejemplos de motores de protones
• Componente de reacción para fondos de partículas.

Resumen

Lo bueno de muchas de estas bibliotecas es que han existido por un tiempo. Como tal, es relativamente fácil encontrar ejemplos, pero también guías detalladas sobre cómo usar una biblioteca en particular en un contexto específico.

Sobre todo, es útil saber qué tipo de objetivo está tratando de lograr, especialmente si va a trabajar en animaciones que implementan datos en tiempo real o entradas basadas en el usuario.

En otras palabras, no existe tal cosa como lo mejor . Cada biblioteca tiene sus propias fortalezas y debilidades. Para mí, probablemente optaría por GSAP porque está muy bien optimizado para su uso en casi cualquier proyecto front-end imaginable.

Pero si estoy haciendo un proyecto menos ambicioso, una biblioteca como Popmotion es suficiente.