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 las transiciones en CSS, pero con una flexibilidad que CSS simplemente no puede ofrecer por sí solo.

La gran ventaja que tenemos es la posibilidad de crear animaciones dinámicas que pueden depender de múltiples escenarios: eventos del usuario, respuestas de una API, el estado de la aplicación, el scroll de la página… todo eso lo manejamos fácilmente con JavaScript, sin necesidad de agregar y remover clases constantemente para variar el comportamiento de cualquier elemento animable. Además, la librería es mucho más extensible, lo que nos abre un abanico de posibilidades realmente amplio.

¿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 prácticamente cualquier cosa que exista en el DOM o en un objeto JavaScript. Concretamente, puedes animar:

Propiedades CSS (como opacity, background-color, border-radius…)
Transformaciones (translate, scale, rotate…)
Atributos SVG (como stroke-dashoffset o d en paths)
Atributos del DOM (como value en un input)
Propiedades de objetos JavaScript puros (para lógica de datos o cálculos)

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 con un único objeto de configuración.

En proyectos reales, esto marca la diferencia cuando:

Las animaciones dependen de condiciones (por ejemplo, si el usuario está logueado o no)
Se disparan bajo demanda (al hacer clic en un botón o recibir datos de una API)
Cambian en tiempo real (animando un número contador, por ejemplo)
Necesitas evitar añadir y quitar clases constantemente, lo que ensucia el código

Ventajas de anime.js frente a animaciones CSS puras

CSS es perfecto para animaciones simples y de bajo coste: hovers, transiciones de entrada, loaders… Pero en cuanto el proyecto crece y las animaciones se vuelven condicionales o dependientes de datos, los problemas aparecen. En mi experiencia, anime.js destaca porque:

Permite animaciones dinámicas controladas directamente por JavaScript sin clases auxiliares
Evita la gestión compleja de clases CSS (añadir .is-active, quitar .is-hidden, etc.)
Facilita animaciones bajo demanda desde manejadores de eventos
Controla secuencias, delays y loops desde un solo objeto de configuración
Hace muy sencillo crear efectos complejos con muy pocas líneas de código

Cuando una animación depende de múltiples escenarios (scroll, eventos del DOM, estados de la aplicación, datos externos…), anime.js es una alternativa real y mucho más mantenible que el CSS puro.

Instalación y descarga de anime.js

Puedes descargar la librería de animación directamente desde su repositorio en: anime.js en Github. Para incluirla en tu proyecto de la forma más sencilla, basta con agregar la siguiente etiqueta script en tu HTML, justo antes del cierre del <body>:

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

Eso es la versión minificada y optimizada para producción. Si prefieres la versión sin comprimir (más fácil de depurar durante el desarrollo), usa:

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

Si tu flujo de trabajo incluye un empaquetador como webpack, Vite o Parcel, puedes instalarla directamente desde npm:

$ npm install animejs

Y luego importarla en tu módulo JavaScript con:

import anime from 'animejs';

Para la documentación oficial completa y más ejemplos interactivos, puedes consultar: anime.js página oficial.

Realizando tu primera animación con anime.js

Primer ejemplo: animación básica con un elemento

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

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

La animación sería tan simple como esta llamada a anime():

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

Con esto, el elemento .box 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() que recibe un objeto de configuración donde targets indica qué elemento animar (acepta selectores CSS, nodos del DOM, arrays de nodos… incluso objetos JavaScript), y el resto de propiedades definen qué se anima y cómo.

Puedes encontrar muchísimos experimentos más avanzados en esta colección de experimentos anime.js en CodePen. Para ilustrar la versatilidad de la librería en esta entrada trabajaremos con una versión propia inspirada en el famoso anime.js stress test de su autor, Julian Garnier. Es un ejemplo aparentemente sencillo pero con un resultado visual muy atractivo, perfecto para entender cómo funciona la librería en la práctica.

El experimento se compone de tres partes bien diferenciadas que veremos a continuación:

CSS del experimento animado

Lo primero es definir el CSS del contenedor principal que albergará todos los cuadros de colores. Creamos un elemento section con unas dimensiones fijas de 400×400 píxeles:

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

Y el estilo de cada uno de los pequeños cuadros de colores que estarán contenidos dentro del section. Los definimos como inline-block para que se coloquen en fila, con 20×20 píxeles de tamaño:

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

Generando el HTML dinámicamente con JavaScript

Ahora toca crear la mayor cantidad posible de divs dentro del section. Haciendo la operación matemática, vemos que necesitamos exactamente:

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

Necesitamos 400 cuadritos (divs) para llenar completamente nuestro section. Crearlos a mano sería absurdo, así que los generamos dinámicamente con JavaScript. Fíjate en cómo usamos anime.random(), un método utilitario que viene incluido en la propia librería, para asignar un color aleatorio a cada cuadrito:

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 características de anime.js que más me gusta —y que no tiene equivalente directo en CSS— es que puedes pasar funciones en lugar de valores fijos para cualquier propiedad. Cada función se ejecuta una vez por elemento animado, lo que permite que cada cuadrito tenga su propio comportamiento único. Esto abre la puerta a animaciones dinámicas muy vistosas sin apenas esfuerzo.

Ahora llegó el momento de la magia. Aplicamos la animación sobre todos los divs con el 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
});

Definimos una serie de parámetros compuestos por números aleatorios en rangos que podemos personalizar a nuestro gusto. Veamos qué hace cada uno:

translateX y translateY: desplazan cada elemento de forma aleatoria en los ejes X e Y, hasta 6 rem en cualquier dirección.
scale: escala aleatoriamente cada cuadrito entre 1x y 2x su tamaño original.
rotate: rota cada elemento hasta 360 grados en cualquier sentido.
delay: introduce un retraso distinto para cada elemento, lo que genera ese efecto de movimiento escalonado.
duration: cada cuadrito tarda entre 1 y 2 segundos en completar su animación.
direction: 'alternate': al terminar la animación, la invierte automáticamente volviendo al estado inicial. Es la clave para que el efecto sea continuo y fluido.
loop: true: hace que la animación se repita indefinidamente.

Con esto obtenemos:

Ver ejemplo Descargar

Transformaciones 3D con anime.js

Ver ejemplo Descargar

Las animaciones son un elemento fundamental en cualquier tipo de aplicación hoy en día: las vemos en apps de Android e iOS, en webs de producto, en dashboards… Y los desarrollos web no se pueden quedar atrás. En esta sección veremos cómo llevar anime.js un paso más allá aplicando transformaciones 3D reales. Anteriormente vimos cómo crear la siguiente animación 2D con cuadritos de colores:

anime.js cuenta con control completo sobre la secuencia y el orden en que se ejecuta cada animación. La librería está soportada en todos los navegadores modernos (puedes consultarlo en la web oficial), y gracias a que internamente usa requestAnimationFrame, el rendimiento es fluido incluso cuando se animan cientos de elementos a la vez.

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

Ahora veremos cómo construir la animación de la imagen promocional de esta sección. El experimento está inspirado en la página oficial de CodePen. Verás lo sencillo que resulta construir algo visualmente impactante con anime.js:

Definiendo el HTML y CSS base

La base HTML es un único elemento section con una clase wrapper que actuará como contenedor de todas las cuadrículas animadas:

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

El CSS del .wrapper hace que ocupe toda la pantalla y configura la perspectiva 3D necesaria para que translateZ, rotateX y rotateY tengan efecto visual de profundidad. La propiedad perspective de CSS3 define a qué distancia está el "ojo" del usuario del plano de la pantalla; sin ella, las transformaciones 3D no se perciben:

.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%;
}

Y el CSS de cada cuadrícula individual. Usamos unidades relativas (vw y vh) para que el grid se adapte automáticamente al tamaño de la ventana del navegador:

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

Usando anime.js: definiendo el JavaScript

En esta sección entramos de lleno con JavaScript. Primero creamos los elementos del DOM que vamos a animar, y después aplicamos la animación con anime.js, que nos ofrece un gran abanico de opciones como veremos a continuación.

Creando la cuadrícula con JavaScript puro

Al igual que en el ejemplo anterior, usamos JavaScript para construir dinámicamente los componentes del contenedor. No necesitas jQuery para esto; el DOM API nativo es más que suficiente. Creamos el elemento con document.createElement(), le añadimos una clase con classList.add() y lo inyectamos en el .wrapper con appendChild(). Lo repetimos 60 veces para tener suficientes cuadrículas:

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 3D con anime.js

Y finalmente, la función que activa la animación 3D sobre todos los divs:

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

El punto más interesante aquí es translateZ: 720. Esta propiedad desplaza cada cuadrícula 720 píxeles hacia el espectador en el eje Z, generando esa sensación de que los elementos "avanzan" o "aumentan" de tamaño. Combinado con las rotaciones de 180 grados en los ejes X (rotateX) e Y (rotateY), el resultado es un efecto de profundidad muy atractivo que puede usarse, por ejemplo, como transición de selección de elemento en una interfaz.

Otro detalle importante: la propiedad delay aquí recibe una función con dos argumentos: el propio elemento el y su índice i dentro del conjunto de elementos animados. Multiplicar el índice por 5 significa que cada elemento empieza su animación 5 milisegundos después que el anterior, creando ese efecto de ola o cascada escalonada que se aprecia en el resultado final.

El easing: 'easeOutQuad' suaviza la deceleración al final de la animación, dándole un aspecto más natural y menos mecánico.

Ver ejemplo Descargar

Animaciones masivas: generando cientos de elementos con JavaScript

Otro caso real en el que anime.js brilla es cuando necesitas animar cientos de elementos simultáneamente. Para ello, primero generamos dinámicamente los nodos en el DOM con una función auto-invocada (IIFE), y luego anime.js se encarga de animarlos todos de una sola vez:

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 400 elementos simultáneamente, el rendimiento sigue siendo fluido gracias al uso de requestAnimationFrame internamente. No es algo que puedas dar por sentado con cualquier solución de animación.

Transformaciones 2D con anime.js

Las transformaciones 2D son las más comunes en el día a día, y anime.js las maneja de forma muy natural. Las propiedades disponibles son:

translateX: desplazamiento horizontal
translateY: desplazamiento vertical
scale: escalado (también scaleX y scaleY por separado)
rotate: rotación (en grados por defecto, o en turns y rad)

Ejemplo combinado que mueve un elemento hacia la derecha, lo escala y lo hace girar una vuelta completa:

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

El uso de '1turn' (una vuelta completa = 360 grados) es una de esas comodidades de la API que se agradecen mucho cuando trabajas con rotaciones. También puedes usar '90deg', '1.5turn' o radianes con '3.14rad'. Es mucho más intuitivo que calcular grados manualmente.

Animaciones 3D con anime.js

anime.js también soporta transformaciones 3D siempre que el elemento padre tenga configurada la perspectiva en CSS (con la propiedad perspective y transform-style: preserve-3d). En uno de mis experimentos, utilicé translateZ, rotateX y rotateY para crear una cuadrícula animada con profundidad real:

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. Cuanto mayor sea el valor, más "cerca" parecerá el elemento del espectador. Ideal para interfaces interactivas, pantallas de bienvenida o efectos visuales que busquen impactar al usuario.

Control total del flujo: duration, delay, loop y direction

Uno de los puntos fuertes de anime.js es el control granular sobre el flujo de la animación. Estas cuatro propiedades son las que más usarás en el día a día:

duration: duración de la animación en milisegundos. Por defecto es 1000 (1 segundo).
delay: tiempo de espera antes de que empiece la animación. Puede ser un número fijo o una función que reciba el elemento y su índice.
loop: true para repetición infinita, o un número para limitar las repeticiones (por ejemplo, loop: 3).
direction: 'normal' (dirección estándar), 'reverse' (de fin a inicio) o 'alternate' (va y vuelve).

El valor direction: 'alternate' es especialmente útil en la práctica, ya que reproduce la animación y luego la invierte automáticamente, creando efectos de vaivén o pulsación muy fluidos sin escribir ni una línea de código adicional.

Casos de uso reales de anime.js en proyectos web

En la práctica, anime.js es ideal para una gran variedad de situaciones. Estos son los casos de uso donde más partido le he sacado en proyectos reales:

Animaciones de entrada y salida de elementos (con opacity y translateY)
Transiciones entre vistas o secciones de una SPA
Contadores animados en dashboards (animando la propiedad de un objeto JavaScript)
Efectos visuales en landings y hero sections
Interfaces con estados dinámicos que cambian en respuesta a datos o eventos
Animaciones SVG (como paths que se dibujan progresivamente con stroke-dashoffset)
Microinteracciones (feedback visual al hacer clic en un botón, completar un formulario, etc.)

En proyectos donde la animación responde directamente a eventos, datos externos o interacción del usuario, anime.js simplifica enormemente el trabajo y mantiene el código limpio y legible.

Compatibilidad, rendimiento y buenas prácticas

anime.js está soportado por todos los navegadores modernos (incluyendo IE10+ para las funciones más básicas). Internamente utiliza requestAnimationFrame, lo que garantiza que las animaciones se sincronizan con la tasa de refresco del monitor y no bloquean el hilo principal del navegador, resultando en un rendimiento fluido.

Dicho esto, hay algunas buenas prácticas que deberías tener en cuenta para sacarle el máximo partido sin penalizar el rendimiento:

Prioriza siempre transform y opacity: son las propiedades que el navegador puede animar de forma más eficiente, ya que no provocan recálculos del layout.
Evita animar propiedades que disparen un reflow del layout (width, height, top, left, margin): cada cambio de estas propiedades obliga al navegador a recalcular el layout de toda la página.
Cuando hay muchos elementos animándose a la vez, mantén las animaciones simples y evita combinar demasiadas propiedades en un solo objeto.
Si necesitas pausar o controlar la animación desde fuera, guarda la instancia que devuelve anime(): const anim = anime({...}); anim.pause(); anim.play();

FAQs sobre anime.js

¿anime.js es mejor que CSS para animaciones?
- Depende del caso. Para animaciones simples y estáticas, CSS es suficiente y más eficiente. Para animaciones dinámicas controladas por lógica, estados o datos, anime.js es claramente superior.
¿Se puede usar anime.js sin jQuery?
- Sí, y es la forma recomendada. Está diseñado para JavaScript puro y no tiene ninguna dependencia externa.
¿anime.js soporta animaciones 3D?
- Sí, siempre que el contenedor padre tenga configurada la perspectiva CSS3 con perspective y transform-style: preserve-3d.
¿Funciona bien con SVG?
- Perfectamente. Es uno de sus puntos más fuertes. Puedes animar atributos de presentación SVG como stroke-dashoffset, fill, o incluso las coordenadas de un path.
¿Puedo controlar la animación desde JavaScript?
- Sí. La función anime() devuelve un objeto con métodos como .play(), .pause(), .restart() y .seek(), que permiten controlar el estado de la animación desde cualquier parte del código.

Conclusiones

En esta entrada hemos visto cómo crear animaciones básicas y complejas con anime.js, desde un simple desplazamiento hasta cuadrículas 3D con cientos de elementos animados simultáneamente. Lo que me parece más valioso de esta librería no es solo el resultado visual, sino lo limpio y mantenible que queda el código comparado con soluciones basadas en añadir y quitar clases CSS.

Con anime.js puedes animar prácticamente cualquier propiedad: width, height, color, background-color, border-radius… y hacer aquellas animaciones que con CSS puro serían muy complicadas de implementar, sobre todo cuando necesitas disparar el efecto bajo demanda o en respuesta a datos dinámicos. Con anime.js, eso es trivial.

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

Si necesitas animaciones simples y estáticas → CSS está bien y es la opción más eficiente
Si necesitas animaciones dinámicas, complejas, bajo demanda o secuenciadas → anime.js es una excelente opción

Es una librería ligera (menos de 17 KB minificada), fácil de aprender si ya conoces cómo funcionan las animaciones en CSS, y muy potente. Con pocos parámetros puedes crear efectos visuales atractivos y profesionales sin complicarte la vida ni depender de frameworks pesados. Si no la has probado todavía, este es el momento.