Las 10 mejores bibliotecas de animación gratuitas para la web

Puede crear algunas cosas locas con animaciones de interfaz de usuario en la web. Esto se está convirtiendo rápidamente en la norma para los sitios web modernos donde la participación del usuario es un gran problema.

Si miras a tu alrededor, encontrarás muchos generadores de código y herramientas personalizadas para ayudarte con la animación. Pero también puede encontrar bibliotecas gratuitas que le ahorrarán tiempo en el proceso de codificación.

Estas son mis 10 selecciones para las mejores bibliotecas de animación web de código abierto. Esto incluye una buena combinación de bibliotecas de JavaScript y animaciones solo de CSS. Ambos estilos son geniales y ambos tienen sus propios beneficios e inconvenientes.

De cualquier manera, te garantizo que esta lista tendrá algo que te encantará.

1. GSAP

La Biblioteca GSAP es uno de los mejores recursos gratuitos disponibles para desarrolladores. Se ejecuta exclusivamente en JavaScript y es una de las bibliotecas de animación más robustas que puede usar.

Funciona además de las especificaciones HTML5 y funciona bien con todos los navegadores modernos, sin mencionar que el equipo actualiza constantemente esta biblioteca con nuevas funciones. Puede funcionar con SVG, elementos de lienzo o incluso objetos jQuery junto con otras bibliotecas relacionadas como EaselJS.

Definitivamente vale la pena investigarlo si necesita una poderosa biblioteca de animación web. Esto también puede manejar tareas simples, pero hay muchas bibliotecas más pequeñas que puede probar para ellas.

2. Anime.js

Cuando encontré por primera vez el Anime.js biblioteca me quedé anonadado. Esta cosa es increíblemente poderosa y va más allá de simples animaciones UI / UX.

Con Anime.js puedes diseñar animaciones estéticas con logos, botones, imágenes, lo que sea. Esto es compatible con todos los activadores típicos del usuario, como clics / desplazamientos / deslizamientos, y tiene acceso a un montón de animaciones personalizadas.

Si echas un vistazo a la documentación de hecho, puede encontrar un montón de ejemplos incrustados directamente en la página. Además hay un colección en CodePen lleno de ejemplos de Anime.js para leer.

3. CSS malvado

Esta es una de las bibliotecas más nuevas con un enfoque en código CSS puro. CSS malvado funciona sobre las propiedades de CSS3 para ofrecer unos resultados bastante increíbles.

En la página principal, encontrará un montón de demostraciones en vivo que puede probar directamente en el navegador. Estos incluyen rotaciones de objetos, volteretas, diapositivas y muchos efectos de animación similares.

Algunos de estos pueden ser lo suficientemente simples como para que pueda construirlos usted mismo. Pero otros se vuelven realmente complejos y eso es lo que hace que jugar con la biblioteca Wicked CSS sea tan divertido.

4. Animar CSS

Quizás el recurso definitivo para la animación web sea Animate.css. Esta biblioteca de código abierto se lanzó hace bastantes años y sigue siendo más relevante que nunca.

El desarrollador Daniel Eden creó este proyecto como una forma simplificada de agregar animaciones CSS3 personalizadas en una página web. A lo largo de los años, se ha convertido en una biblioteca de animación completa con suficiente potencia para ejecutarse en cualquier proyecto importante.

La página de inicio ofrece muchas demostraciones para que pueda probar los estilos de animación y ver lo que piensa. Además, hay mucha documentación excelente en GitHub incluyendo una lista de clases y algunos fragmentos de código de ejemplo.

5. martes

Lo que más me gusta de martes es el sencillez de estas animaciones. Con esta biblioteca, controlas cómo aparecen y desaparecen los elementos de la página.

Pero estas animaciones no son exageradas ni súper glamorosas. En su lugar, tienen un buen golpe sutil que realmente mejora la estética de la página, pero no quita valor al contenido o la experiencia del usuario.

No he visto muchos sitios web usando Tuesday, pero es quizás la biblioteca más limpia que existe.

Se ejecuta en CSS puro y los estilos de animación son muy razonables. Pueden combinarse con cualquier sitio y tiene más de una docena de estilos de fundido de entrada / salida con los que trabajar.

6. CSShake

Todavía no he visto ninguna biblioteca CSS tan divertida o extraña como CSShake. Esto es una locura y una parte única, por lo que probablemente no se adaptará a todos los sitios web.

La razón por la que hizo la lista es porque no puedo pensar en ninguna biblioteca similar con estas características. Con CSShake puede activar animaciones flotantes con efectos de agitación de todo tipo de estilos, todos ejecutados en CSS puro.

Desde movimientos leves hasta sacudidas vigorosas y todo lo que hay entre ellos, esta biblioteca lo tiene todo con una configuración bastante fácil para arrancar.

7. Mo.js

De las muchas bibliotecas de JavaScript detalladas para la animación, tengo que decir Mo.js es uno de los mejores. Esta biblioteca es enorme y está realmente diseñada para gráficos en movimiento sobre animaciones UI / UX.

Pero puede usar esto para cualquier cosa si aprende cómo funciona. Los códigos son bastante simples de manipular y hay una montón de tutoriales puede seguir para hacer su vida más fácil.

¿Es esta la biblioteca de animación perfecta? Difícilmente.

Sin embargo tiene mucho de características sorprendentes y realmente simplifica el proceso de animación, ya sea que esté animando una barra de navegación, un logotipo o algún otro objeto complejo.

8. Animate Plus

Para una biblioteca de animación súper liviana y fácil, consulte Animate Plus. Esto solo pesa 2KB cuando se minimiza y tiene todas las características básicas que esperaría con la animación personalizada de JavaScript.

Esto es fácil de instalar con npm y puede configurarlo siguiendo los fragmentos de código en GitHub. La mayoría de estos son solo demostraciones básicas para que no entren en nada complejo, pero también puede encontrar todas las opciones y métodos de devolución de llamada directamente en GitHub.

Mira esto esta demostración de muestra extraído directamente del fragmento de código en el repositorio principal. No es mucho, pero le mostrará cómo configurar Animate Plus y ejecutar un poco de código predeterminado desde cero.

9. Bounce.js

Con Bounce.js puede crear potentes animaciones CSS3 y JS con solo unos pocos clics.

En la página de inicio, encontrará un generador de animaciones personalizado que se centra primero en los módulos. De esta manera, puede agregar las funciones de animación específicas que desee en la página sin agregar código adicional.

La mayor diferencia con Bounce.js es que no funciona solo como una biblioteca. Aunque puedes encontrar información de configuración en GitHub, no es solo un guión básico. En realidad, viene con un creador web, por lo que Bounce es una de las pocas bibliotecas de animación que puede estilizar en su navegador.

10. Magia

Las animaciones divertidas con un toque de alegría describen mejor el magia Biblioteca.

Toda esta colección se centra en las animaciones CSS3 al tiempo que impulsa estilos personalizados que no se pueden encontrar en ningún otro lugar. Es una colección bastante grande de códigos CSS3 y también encontrarás muchos trucos interesantes aquí. Rotaciones, cambios de perspectiva, efectos de desvanecimiento, mucho para todos.

Si miras el página de demostración puedes ver algunos de estos efectos en acción.

Por supuesto, esta biblioteca es mucho más pequeña que otras bibliotecas CSS3, por lo que no puede competir con Tuesday o Animate.css. Pero tiene muchas animaciones web ordenadas que simplemente no encontrará en otras bibliotecas.