anime.js para realizar animaciones con JavaScript

Ver ejemplo Descargar

Las animaciones son una parte clave de cualquier interfaz moderna. Cuando empecé a trabajar con animaciones más allá de simples transiciones CSS, me encontré rápidamente con una limitación clara: cuando el comportamiento depende de lógica, estados o datos dinámicos, CSS se queda corto. Ahí es donde entra en juego anime.js, una librería JavaScript ligera pero sorprendentemente potente para crear animaciones complejas con muy poco código.

En esta entrada veremos cómo usar la librería de animaciones para JavaScript llamada anime.js; en general es una librería muy fácil de usar que nos recordará bastante a cómo trabajan las animaciones en CSS y transiciones en CSS.

La ventaja que tenemos es la posibilidad de crear animaciones dinámicas que pueden depender de muchos escenarios que podemos manejar fácilmente con JavaScript y sin la necesidad de agregar/remover clases cada cierto tiempo para variar el comportamiento de cualquier elemento animable; además de ser más extensible lo que nos trae más posibilidades de uso.

¿Qué es anime.js y por qué usarlo para animaciones JavaScript?

anime.js es una librería de animación basada en JavaScript que permite animar:

• Propiedades CSS
• Transformaciones (translate, scale, rotate…)
• Atributos SVG
• Atributos del DOM
• Propiedades de objetos JavaScript

Lo que más me llamó la atención cuando la probé por primera vez es que su API recuerda mucho a las animaciones CSS, pero con la flexibilidad total de JavaScript. No necesitas jQuery ni frameworks adicionales, y puedes controlar cada detalle del tiempo, la secuencia y el comportamiento de la animación.

• En proyectos reales, esto marca la diferencia cuando:
• Las animaciones dependen de condiciones
• Se disparan bajo demanda
• Cambian en tiempo real
• Necesitas evitar añadir y quitar clases constantemente

Ventajas de anime.js frente a animaciones CSS

CSS es perfecto para animaciones simples, pero en cuanto el proyecto crece aparecen problemas. En mi experiencia, anime.js destaca porque:

• Permite animaciones dinámicas controladas por JavaScript
• Evita la gestión compleja de clases CSS
• Facilita animaciones bajo demanda
• Controla secuencias, delays y loops desde un solo lugar
• Hace muy sencillo crear efectos complejos con poco código

Cuando una animación depende de múltiples escenarios (scroll, eventos, estados, datos…), anime.js es una alternativa real a CSS puro.

Descargando la librería de animaciones para JavaScript

Puedes descargar la librería de animación en el siguiente enlace: anime.js en Github; para usar la librería, simplemente agregamos el siguiente enlace:

<script src="anime.min.js"></script>

O para la versión comprimida:

<script src="anime.js"></script>

Para la versión de desarrollo; si deseas ver más ejemplos o la documentación oficial puedes consultar el siguiente enlace: anime.js página oficial.

Instalación con npm o bower:

$ npm install animejs
$ bower install animejs

Realizando una animación de ejemplo

Primer ejemplo de animación con anime.js

Vamos con un ejemplo sencillo para entender la base. Supongamos que tienes un div con la clase .box:

<div class="box"></div>

La animación sería tan simple como:

anime({
 targets: '.box',
 translateX: 250,
 duration: 800,
 easing: 'easeInOutQuad'
});

Con esto, el elemento se desplaza 250 píxeles en el eje X con una transición suave. Aquí ya vemos el patrón base: una llamada a anime() con un objeto de configuración.

Hay muchos ejemplos los cuales puedes encontrar en el siguiente enlace: experimentos anime.js pero para iniciar y ver la versatilidad de esta librería trabajaremos con un versión codificada del siguiente experimento anime.js stress test la cual es bastante sencilla pero bastante atractiva los efectos finales que se consiguen a la vista como veremos a continuación.

Como indicamos anteriormente, el experimento es bastante sencillo a realizar, solo necesitamos un poco de CSS y JavaScript como lo podemos ver en las siguientes tres partes que lo componen:

CSS del experimento animado

Definir el CSS para el contenedor que contendrá (valga la redundancia) cada uno de los cuadros que definiremos anteriormente; para eso se creará un cuadro con las siguiente dimensiones:

section {
  width: 400px;
  height: 400px;
}

Y cada uno de los cuadros de colores que estarán contenido dentro del section definido anteriormente:

div {
  display: inline-block;
  width: 20px;
  height: 20px;
}

Generando el HTMl vía JavaScript

Ahora debemos crear la máxima cantidad de divs dentro del section; realizando una sencilla operación matemática, nos damos cuenta que:

(400*400)/(20*20) = 400

Necesitamos unos 400 cuadritos/div para llenar completamente nuestro section, cosa que obviamente no realizaremos a mano a menos que estés muy aburrido; para realizar esto empleamos el siguiente JavaScript:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];
var createElements = (function() {
  var sectionEl = document.createElement('section');
  for (var i = 0; i < maxElements; i++) {
    var el = document.createElement('div');
    el.style.background = colors[anime.random(0, 3)];
    sectionEl.appendChild(el);
  }
  document.body.appendChild(sectionEl);
})();

Animaciones dinámicas con valores aleatorios

Una de las cosas que más me gusta de anime.js es que puedes usar funciones en lugar de valores fijos. Esto abre la puerta a animaciones dinámicas muy vistosas.

En uno de mis primeros experimentos generé una animación con valores aleatorios para posición, escala y rotación.

Ahora llegó el momento de la magia; vamos a emplear la librería anime.js para crear una animación que está compuesta del siguiente código:

anime({
  targets: 'div',
  translateX: function() { return anime.random(-6, 6) + 'rem'; },
  translateY: function() { return anime.random(-6, 6) + 'rem'; },
  scale: function() { return anime.random(10, 20) / 10; },
  rotate: function() { return anime.random(-360, 360); },
  delay: function() { return 400 + anime.random(0, 500); },
  duration: function() { return anime.random(1000, 2000); },
  direction: 'alternate',
  loop: true
});

Como vemos definimos una serie de parámetros compuesto por números random o aleatorios en un rango que podemos personalizar como queramos; definimos la traslación en cada uno de los ejes 2D con translateX y translateY así como el escalado con scale, el retraso de la animación delay, rotación rotate, duración duration e indicamos que la animación se ejecute infinitamente loop y un parámetro muy importante que es el direction con el valor alternate que permite reconstruir la escena una vez finalizada la animación (algo así como realizar la animación pero a la inversa al llegar a su fin).

Con esto obtenemos:

Ver ejemplo Descargar

Transformaciones 3d con anime.js

Las animaciones son un elemento fundamental en cualquier tipo de aplicación hoy en día; ver animaciones en las aplicaciones creadas en Android, iOS es bastante común hoy en día, y por supuesto la reina, los desarrollos web no se pueden quedar atrás y en esta entrada veremos como generar animaciones con anime.js en la cual se aplican varias transformaciones 3D; anteriormente vimos como crear la siguiente animación:

Anime.js cuenta con un control completo sobre la secuencia y orden en el que se va a realizar cada animación y esta librería es soportada en navegadores modernos como puedes consultar en la web oficial de la potente pero ligera librería.

Definiendo las animaciones de las cuadrículas con anime.js

Ahora veremos cómo crear una animación como la mostraba con imagen promocional de esta entrada; este experimento también fue tomado de la página oficial: CodePen; ahora se procede a explicar su composición y ver lo sencillo que resulta emplear la librería anime.js para realizar animaciones:

Definiendo el HTML y CSS

En este ejemplo que veremos a continuación lo primero que tenemos que hacer es especificar el HTML base que tenemos a continuación; como verás es un simple elemento sección en el cual vamos a popular todos esos cuadrículas animadas con anime.js que vimos anteriormente:

<section class="wrapper"></section>

Y con el CSS indicamos el tamaño total del contenedor anteriormente mostrado como HTML base; como vemos ocupará todo el tamaño de la pantalla, de esta forma las cuadrículas animadas podrás mostrarse en toda su magnitud, y por si las redimensiones o alguna cuadrícula que se salga de línea ocultamos cualquier cosa que no entre dentro del cuerpo de nuestra web; indicamos que será de posición absoluta ubicada encima de todo y le damos una perspectiva 3D, y esto es para que se vean esos movimientos 3D de transformaciones soportados por CSS3:

  .wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 800px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }

El CSS para cada uno de los rectángulos o cuadrículas es realmente sencillo, solamente definir su tamaño, que al ser un cuadrado el ancho y el ancho es el mismo; estas cuadrículas son las que van contenidos dentro del tag anterior:

  div {
    width: 10vw;
    height: 10vh;
  }

Usando la librería anime.js - definiendo el JavaScript

En esta sección vamos a entrar de lleno con el JavaScript y vamos a crear los elementos que vamos a animar con anime.js y luego procedemos a realizar la animación con la librería que nos ofrece un gran abanico de opciones como veremos a continuación.

Creando la cuadrícula a animar con JavaScript

Como en el ejemplo anterior, se emplea el JavaScript para construir los distintos componentes del contenedor; vea que creamos el elemento con JavaScript básico, no tienes porqué emplear jQuery, con JavaScript básico es más que suficiente, le agregamos una clase y finalmente agregamos el cuadrado que vamos a animar un poco más adelante al elemento padre, esto lo hacemos unas 60 veces como puedes ver en el siguiente código:

    function createEl(className) {
      var el = document.createElement('div');
      el.classList.add(className);
      wrapperEl.appendChild(el);
    }
    for (var i = 0; i < numberOfThings; i++) {
      createEl('red');
      createEl('blue');
      createEl('green');
      createEl('yellow');
    }

Animando la cuadrícula con anime.js

Y la función encargada de realizar la animación, lo cual viene siendo la sección en donde empleamos la librería anime.js:

    anime({
      targets: 'div',
      translateZ: 720,
      rotateX: 180,
      rotateY: 180,
      delay: function(el, i) {
        return i * 5;
      },
      loop: true,
      direction: 'alternate',
      easing: 'easeOutQuad',
    });

Como punto interesante tenemos el valor de la propiedad translateZ el cual traslada en el eje de las Z todos los recuadros anteriores dando como resultado la sensación de que "aumentan" de tamaño dichos contenedores, esto en conjunto con las rotaciones dan un resultado interesante que puede ser empleado en aplicaciones web como proceso de selección de un elemento.

El resto de las propiedades son de fácil entendimiento, tenemos las rotaciones de 180 grados en el eje de las X y Y, translaciones en el eje de las 7 el tipo de animación que puedes profundizar más en la web de la API y que es un loop, es decir que cuando termine la animación debe iniciar nuevamente.

Animaciones masivas: generando elementos con JavaScript

Otro caso real fue animar cientos de elementos a la vez. Para ello, primero generé dinámicamente los nodos:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];
(function() {
 var sectionEl = document.createElement('section');
 for (var i = 0; i < maxElements; i++) {
   var el = document.createElement('div');
   el.style.background = colors[anime.random(0, 3)];
   sectionEl.appendChild(el);
 }
 document.body.appendChild(sectionEl);
})();

Este enfoque demuestra algo importante: anime.js escala muy bien, incluso cuando animas muchos elementos simultáneamente.

Transformaciones 2D con anime.js

Las transformaciones 2D son las más comunes y anime.js las maneja de forma muy natural:

• translateX
• translateY
• scale
• rotate

Ejemplo combinado:

anime({
 targets: '.square',
 translateX: window.innerWidth * 0.8,
 scale: 0.8,
 rotate: '1turn'
});

También puedes usar grados (deg) o vueltas completas (turn), algo muy cómodo cuando trabajas con rotaciones complejas.

Animaciones 3D con anime.js

Anime.js también soporta transformaciones 3D cuando se combinan con CSS3. En uno de mis experimentos, utilicé translateZ, rotateX y rotateY para crear una cuadrícula animada con profundidad:

anime({
 targets: 'div',
 translateZ: 720,
 rotateX: 180,
 rotateY: 180,
 delay: (el, i) => i * 5,
 loop: true,
 direction: 'alternate',
 easing: 'easeOutQuad'
});

El uso de translateZ genera una sensación de profundidad muy interesante, ideal para interfaces interactivas o efectos visuales más avanzados.

Control de la animación: duración, delay, loop y direction

Uno de los puntos fuertes de anime.js es el control total del flujo:

• duration: duración de la animación
• delay: retraso antes de empezar
• loop: repetición infinita o controlada
• direction: normal, reverse o alternate

El valor direction: 'alternate' es especialmente útil, ya que reproduce la animación y luego la invierte automáticamente, creando efectos fluidos sin escribir más código.

Casos de uso reales de anime.js en proyectos web

En la práctica, anime.js es ideal para:

• Animaciones de entrada y salida
• Transiciones entre vistas
• Dashboards interactivos
• Efectos visuales en landings
• Interfaces con estados dinámicos
• Animaciones SVG
• Microinteracciones

En proyectos donde la animación responde a eventos, datos o interacción del usuario, anime.js simplifica muchísimo el trabajo.

Compatibilidad, rendimiento y soporte de navegadores

Anime.js está soportado por todos los navegadores modernos (incluyendo IE10+). Internamente utiliza requestAnimationFrame, lo que garantiza un rendimiento fluido.

Mi recomendación es:

• Priorizar transform y opacity
• Evitar animar propiedades que disparen reflow (width, height, top, left)
• Mantener animaciones simples cuando hay muchos elementos

FAQs sobre anime.js

• ¿Anime.js es mejor que CSS para animaciones?
  • Depende del caso. Para animaciones dinámicas controladas por lógica, sí.
• ¿Se puede usar anime.js sin jQuery?
  • Sí, está pensado para JavaScript puro.
• ¿Anime.js soporta animaciones 3D?
  • Sí, combinándolo con transformaciones CSS3.
• ¿Funciona bien con SVG?
  • Perfectamente. Es uno de sus puntos fuertes.

Conclusiones

Estas son animaciones básicas que puedes emplear en tus webs, son efectos que puedes lograr muy vistosos y en esta entrada pudiste apreciar en detalle mediante un ejemplo cómo crear una animación que parece compleja muy fácilmente; esta es una gran librería JavaScript que contiene efectos importantes que puedes emplear en multitud de cosas, en elementos como imágenes, textos, secciones, puedes acoplarlo o trabajarlo con otros recursos, APIs, framework o lo que encuentres por allí en internet como bootstrap, jQuery, CSS básico etc, y crear tus propios trucos para que tu web se vea como nunca.

Con anime.js podemos animar muchas otras propiedades CSS como el ancho, alto y color y hacer aquellas animaciones que con CSS se nos complicaría mucho la vida, sobre todo cuando debemos realizar una animación o efecto bajo demanda; con anime.js esto es muy fácil de realizar.

Después de trabajar con anime.js en varios proyectos, mi conclusión es clara:

• Si necesitas animaciones simples → CSS está bien
• Si necesitas animaciones dinámicas, complejas o bajo demanda → anime.js es una excelente opción

Es una librería ligera, fácil de aprender y muy potente. Con pocos parámetros puedes crear efectos visuales atractivos y profesionales, sin complicarte la vida ni depender de frameworks pesados.