Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Las mejores bibliotecas de JavaScript para animación, gratuitas y de código abierto

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Las animaciones pueden mejorar significativamente la experiencia del usuario cuando se usan de manera correcta. Hay muchos elementos en una página web que se pueden animar para que cobre vida. Cosas básicas, como el color de fondo de un botón o el radio del borde de algunos elementos, también se podrían animar con CSS.

Sin embargo, CSS tiene sus limitaciones y necesitarás usar JavaScript si quieres tener más control sobre cada aspecto de los elementos que estés animando. En este artículo, te mostraré ocho de las mejores bibliotecas de JavaScript para animación, gratuitas y de código abierto, que puedes utilizar en tus proyectos hoy mismo.

Mo.js

Mo.js es una excelente biblioteca para añadir gráficos en movimiento basados ​​en JavaScript a tu sitio web. Es muy rápida y produce animaciones fluidas que se ven muy bien en todo tipo de dispositivos. También es modular, por lo que podrás evitar sobrecargas adicionales si únicamente quieres usar componentes específicos.

La biblioteca tiene una API declarativa que se utiliza para ajustar el valor de distintas propiedades para los componentes que crees. Viene con cuatro diferentes módulos integrados llamados Html, Shape, ShapeSwirl y Burst. Bursts y swirls se pueden usar de manera creativa para todo tipo de interacciones del usuario con los elementos de tu sitio web.

Haz clic en cualquier parte del CodePen anterior y verás una pequeña explosión de círculos y estrellas. Fue creada por LegoMushroom usando el módulo Burst and Shape de mo.js.

La documentación de mo.js ofrece muchos ejemplos interesantes que pueden ayudarte a aprender todos los aspectos de la biblioteca.

Anime

Anime es una de las bibliotecas de animación más populares en GitHub. Es muy ligera y viene con una API simple y fácil de aprender. La biblioteca puede usarse para animar propiedades CSS, SVG y atributos DOM.

Te ofrece mucho control sobre la forma en que se animan los elementos. Puedes controlar la velocidad, la dirección y el orden en que se mueven las cosas. Hay opciones para pausar, reiniciar o revertir una animación siempre que lo decidas.

La biblioteca también tiene un soporte decente para animar SVG. Puedes crear un efecto de transformación suave entre dos formas SVG diferentes o crear una animación de dibujo con líneas.

Haz clic en el botón que dice Write the Name en el CodePen anterior y verás las letras de mi nombre animarse una por una. Esta demostración fue parte de una serie de tutoriales sobre Anime. Puedes revisarlos para aprender más sobre la biblioteca.

Popmotion

Popmotion es otra biblioteca de animación ligera y popular. Puedes utilizarla para animar números, colores y cadenas complejas. La función de animación principal en la biblioteca es de alrededor de 5kb, y la biblioteca completa es de alrededor de 12kb.

Puedes usarla para crear dos tipos de animaciones: fotogramas clave y resortes. Entre otras cosas, puedes configurar un punto «desde» y «hasta» para animar los fotogramas clave. Las animaciones de resorte vienen con propiedades como rigidez, amortiguación, masa y velocidad para darle a tu animación un movimiento más natural. La biblioteca también viene con muchas funciones de utilidad para utilizar en los cálculos, como angle, clamp, distance, snap, etc.

La animación de fotogramas clave en la demostración de CodePen anterior es de gaougalos y se animó con la biblioteca Popmotion.

ScrollReveal

La biblioteca ScrollReveal resulta útil cuando quieres animar elementos a medida que se desplazan dentro o fuera de la ventana gráfica.

Incluye muchas opciones disponibles para animar los elementos. Tienes control sobre el progreso de la animación con propiedades de retardo, duración e intervalo. También hay opciones para controlar la rotación, la escala y el movimiento de los objetos que estés revelando. La biblioteca también viene con callbacks que se pueden utilizar para determinar qué ocurre antes o después de que se haya revelado un elemento.

En la demostración del CodePen anterior, hecha por Sava Lazic, se crea una línea de tiempo vertical visualmente atractiva usando la biblioteca ScrollReveal. Puedes crear algo similar para mostrar productos o proyectos en tu sitio web.

Vivus

Vivus es una increíble biblioteca basada en JavaScript que fue creada específicamente para animar SVGs. Es muy ligera y no tiene dependencias.

Vivus te ofrece tres maneras diferentes de animar las trayectorias en un SVG. Puedes animar las líneas todas a la vez, con un retraso o una tras otra. También te brinda mucha flexibilidad al configurar el tiempo de la animación.

Algunas cosas que debes tener presente al utilizar Vivus es que siempre anima los elementos en el orden en que están definidos en el SVG. Además, los elementos que quieras animar deben tener un trazo en lugar de un relleno.

La bonita animación de las trayectorias del SVG en el CodePen anterior se creó con solo seis líneas de código y algo de ayuda de Vivus. Esta demostración es de Alex Nelson.

Typed.js

Puedes adivinar por el nombre Typed.js que esta biblioteca de animación se utiliza para escribir texto. Puedes pasar todas las cadenas (strings) que quieras escribir como una matriz (array). La biblioteca también ha implementado un enfoque más amigable con el SEO, ya que el texto que quieras animar se puede leer en la página web desde una etiqueta div de HTML.

El comportamiento de la animación de la escritura se puede configurar con la ayuda de varios parámetros, incluyendo la velocidad de escritura, la velocidad de retroceso, el retardo de inicio, el retardo de retroceso, el recuento de bucles, etc. También puedes definir una gran cantidad de funciones de callback que se activan en diferentes eventos, como después de escribir una cadena.

El CodePen anterior, creado por Conner, ilustra cómo podemos usar esta biblioteca para hacer que una aburrida página de error 404 sea más interesante.

ProgressBar.js

Es una buena idea añadir barras de progreso a cualquier proceso que lleve un poco de tiempo completar. Esto permite a los usuarios saber qué tan rápido está progresando en la tarea. Por ejemplo, puedes mostrar una barra de progreso en un editor de imágenes en línea para que los usuarios sepan que la página no se ha bloqueado, sino que en realidad está trabajando con la imagen en segundo plano.

La biblioteca ProgressBar.js hace que sea increíblemente fácil para los desarrolladores añadir modernas barras de progreso a sus sitios web. Además de crear barras de progreso con algunas formas integradas como una línea, un círculo o un semicírculo, también tienes la opción de usar tus propias formas personalizadas. Esto abre basatantes posibilidades interesantes.

Como puedes ver en la demostración, podemos animar una variedad de propiedades en nuestras barras de progreso. Puedes revisar este tutorial introductorio de ProgressBar.js para aprender más sobre la biblioteca.

Lottie

Lottie de Airbnb es una biblioteca de animación como ninguna otra de las que hemos examinado hasta ahora. Analiza animaciones creadas por Adobe After Effects que han sido exportadas como JSON con Bodymovin. Posteriormente, podrás renderizar estos efectos directamente en tus páginas web.

La página de la biblioteca en GitHub explica de manera detallada el proceso de instalación y cómo funciona. Hay muchos métodos globales disponibles para controlar el progreso de la animación. Puedes iniciar, detener e invertir fácilmente la dirección de la animación.

Solo necesitas escribir unas cuantas líneas de código para cargar el archivo JSON requerido e inicializar la animación con algunos parámetros. La demostración de CodePen anterior de kittons es un excelente ejemplo para mostrar cómo puedes renderizar tus animaciones de After Effects dentro de un navegador con un mínimo esfuerzo.

Reflexiones finales

En este artículo, examinamos ocho bibliotecas populares de JavaScript para crear animaciones, gratuitas y de código abierto. Cada una hace algo diferente y se enfoca en distintos aspectos de la animación web. Con estas bibliotecas, podrás animar casi todo en tu sitio web. ¡Espero que las uses para crear un sitio web elegante que te diferencie de la competencia! Solo asegúrate de no exagerar con las animaciones.

Una cosa más a tener en cuenta es que deberías intentar usar CSS para animaciones simples. No tiene mucho sentido cargar una biblioteca de JavaScript completa si todo lo que quieres es cambiar el color de los elementos cuando los usuarios se desplacen sobre ellos.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.