Anime.js v4: La Guia Completa del Motor de Animacion JavaScript en 2026

Anime.js es un motor de animacion JavaScript ligero creado por Julian Garnier que ha impulsado animaciones web durante mas de una decada. En 2025, la biblioteca experimento su transformacion mas significativa: una reescritura desde cero a la version 4 (v4) que reemplazo la funcion monolitica anime() con una API modular y ESM-first. Con mas de 58,000 estrellas en GitHub y un flujo activo de versiones npm que alcanzo v4.3.6 a principios de 2026, Anime.js ha demostrado que una biblioteca de animacion bien disenada puede prosperar en una era de animaciones CSS y WAAPI.

La version 4 no es simplemente una actualizacion incremental. Es un cambio filosofico: en lugar de una unica funcion que hace todo, v4 ofrece modulos discretos y optimizables para tree-shaking que se importan por nombre. La funcion central animate() reemplaza la antigua anime(). Los parametros han sido renombrados (la propiedad value ahora es to, easing ahora es ease), y se han anadido sistemas completamente nuevos – fisica de resortes via createSpring, interacciones arrastrables, rutas de movimiento SVG, division de texto y una integracion WAAPI de solo 3 KB. El resultado es una biblioteca que se siente familiar y radicalmente mas capaz, capaz de impulsar 60 fotogramas por segundo en 3000 elementos DOM mientras se integra en procesos de construccion modernos sin hinchazon.

Esta guia cubre todo lo que necesita saber sobre Anime.js v4 en 2026: instalacion, API modular, cambios importantes respecto a v3, fisica de resortes, lineas de tiempo, animacion SVG y de texto, caracteristicas de rendimiento y las ultimas novedades de las series v4.2 y v4.3.

Ultima actualizacion: 2 de mayo de 2026 – basada en la documentacion de animejs.com y el repositorio juliangarnier/anime.

Tabla de Contenidos

1. Que hay de Nuevo en Anime.js v4?
2. Cambios Importantes de v3 a v4
3. Como Instalo e Importo Anime.js v4?
4. API Principal: La Funcion animate()
5. Fotogramas Clave en v4
6. Modos de Composicion: Replace, Blend y None
7. Fisica de Resortes con createSpring
8. Lineas de Tiempo y Posiciones de Etiqueta
9. Modulo de Animacion SVG
10. Animacion de Texto con splitText
11. Interacciones Arrastrables
12. createScope para Integracion con Frameworks
13. Integracion WAAPI
14. Configuracion del Motor y Rendimiento
15. Historial de Versiones: v4.2 y v4.3
16. Lecturas Adicionales y Recursos

Que hay de Nuevo en Anime.js v4?

Respuesta directa: Anime.js v4 es una reescritura completa con una API modular ESM-first que reemplaza la unica funcion monolitica anime(). Introduce fisica de resortes, fotogramas clave con cuatro sintaxis, lineas de tiempo mejoradas con posiciones de etiqueta, createScope para vinculacion con frameworks, createDraggable, morphing y rutas de movimiento SVG, splitText, WAAPI y configuracion a nivel de motor – todo con rendimiento de 60fps en miles de elementos.

Anime.js v4, lanzado en abril de 2025 tras cinco anos de desarrollo, representa una renovacion arquitectonica total. Aqui hay un resumen de cada nuevo sistema importante:

Arquitectura de un Vistazo

mindmap
  root((Anime.js v4))
    Nucleo
      animate
      stagger
      createTimer
      createTimeline
      createSpring
      createLayout
      waapi
      engine
    SVG
      createMotionPath
      createDrawable
      morphTo
    Texto
      splitText
    Interaccion
      createDraggable
      createScope
    Utilidades
      random
      round
      lerp
      createSeededRandom
      get
      set
      remove

Cambios Importantes de v3 a v4

Respuesta directa: Los cambios mas importantes son: anime() ahora es animate(), value es to, easing es ease, y las banderas de direccion como alternate ahora son propiedades booleanas en lugar de valores de cadena.

Si esta migrando desde Anime.js v3, cada punto de llamada necesitara actualizacion. La superficie de la API se ha simplificado y renombrado deliberadamente para lograr consistencia. La siguiente tabla asigna cada API de v3 a su equivalente en v4.

Cambios de Parametros

Cambios de Callbacks

Cambios de Modulos

Como Instalo e Importo Anime.js v4?

Respuesta directa: Ejecute npm install animejs@latest, luego importe modulos como import { animate, stagger } from 'animejs'. Para CDN, importe desde esm.sh o jsDelivr con sintaxis ESM.

La instalacion sigue las convenciones estandar de npm:

# Instalar la ultima version (v4.3.6 a mayo de 2026)
npm install animejs@latest

# O una version especifica
npm install animejs@4.3.6

Rutas de Importacion de Modulos

Anime.js v4 admite importaciones de subruta desde v4.2.0 en adelante. Cada modulo se puede importar individualmente para una optimizacion optima del tree-shaking:

// Nucleo -- siempre disponible
import { animate, stagger, createSpring, createTimer } from 'animejs';
import { waapi } from 'animejs';
import { engine, defaults } from 'animejs';
import { utils } from 'animejs';

// Importaciones de subruta (v4.2+)
import { createTimeline } from 'animejs/timeline';
import { createScope } from 'animejs/scope';
import { createDraggable } from 'animejs/draggable';
import { splitText } from 'animejs/text';
import { createMotionPath, createDrawable } from 'animejs/svg';
import { eases, spring } from 'animejs/easings';

Uso con CDN

<script type="module">
  import { animate, stagger } from 'https://esm.sh/animejs@4.3.6';

  animate('.box', {
    x: { to: 300 },
    duration: 1000,
    ease: 'outQuint',
  });
</script>

API Principal: La Funcion animate()

Respuesta directa: animate(targets, params) es el punto de entrada principal. Acepta selectores CSS, elementos DOM, NodeLists u objetos JavaScript como objetivos. Los parametros incluyen to, from, ease, duration, delay, loop, alternate, reversed, composition, modifier y todos los callbacks.

La funcion animate() acepta dos argumentos: el objetivo(s) y un objeto de parametros. Aqui esta la referencia completa de parametros:

animate('.element', {
  // Propiedades animadas
  x: { to: 300 },           // Propiedad unica con from/to
  rotate: { from: 0, to: 360 }, // From y to explicitos
  scale: 2,                 // Abreviatura (igual que to: 2)
  backgroundColor: '#ff0',  // Color CSS (admite hexadecimal con alfa: #ff0a)

  // Temporizacion
  duration: 1000,           // Milisegundos (predeterminado: variable)
  delay: 200,               // Retardo antes de comenzar
  ease: 'outQuint',         // Funcion de suavizado (ver tabla)
  loop: 2,                  // Repeticiones adicionales (0 = sin bucle)
  alternate: true,          // Invertir en cada bucle
  reversed: false,          // Comenzar desde el valor final
  loopDelay: 0,             // Pausa entre bucles (reemplaza v3 endDelay)

  // Renderizado
  composition: 'replace',   // 'replace' | 'blend' | 'none'
  modifier: utils.round(2), // Post-procesamiento de valores
  frameRate: 60,            // Limitar FPS
  playbackRate: 1,          // Multiplicador de velocidad

  // Callbacks
  onBegin: () => {},        // Cuando comienza la animacion (incluyendo retardo)
  onBeforeUpdate: () => {}, // Antes de cada tick de actualizacion
  onUpdate: (anim) => {},   // Cada fotograma
  onRender: (anim) => {},   // Cuando los valores realmente cambian
  onLoop: (anim) => {},     // Fin de cada bucle
  onPause: (anim) => {},    // Cuando se pausa
  onComplete: (anim) => {}, // Cuando termina completamente
});

Referencia de Funciones de Suavizado

Anime.js v4 elimina el prefijo ease de los nombres de suavizado (use 'outQuad' en lugar de 'easeOutQuad'). Los suavizados personalizados se pueden pasar como funciones o crear con createSpring().

Fotogramas Clave en v4

Respuesta directa: Anime.js v4 admite cuatro sintaxis de fotogramas clave: basada en arreglos (cada elemento es un fotograma clave con su propio to/from), basada en duracion, basada en porcentaje y basada en desplazamiento – ofreciendo control fino sobre animaciones de multiples pasos.

Anime.js v4 introduce cuatro sintaxis distintas de fotogramas clave, cada una adecuada para diferentes casos de uso:

// 1. Basada en arreglos (la mas flexible -- cada elemento es un fotograma clave)
animate('.box', [
  { rotate: { to: 90 }, duration: 500 },
  { rotate: { to: 180 }, duration: 500 },
  { rotate: { to: 360 }, duration: 500 },
]);

// 2. Basada en duracion (el progreso se calcula a partir de las duraciones)
animate('.box', {
  rotate: {
    0: 0,    // 0ms -- inicio
    500: 90, // 500ms -- fotograma clave 1
    1000: 180, // 1000ms -- fotograma clave 2
    2000: 360, // 2000ms -- fotograma clave 3
  }
});

// 3. Basada en porcentaje (progreso relativo a la duracion total)
animate('.box', {
  rotate: {
    '0%': 0,
    '25%': 90,
    '50%': 180,
    '100%': 360,
  }
});

// 4. Basada en desplazamiento (desplazamientos explicitos para temporizacion precisa)
animate('.box', {
  rotate: { to: 360 },
  offset: [0, 500, 1000, 2000],
  value: [0, 90, 180, 360],
});

Modos de Composicion: Replace, Blend y None

Respuesta directa: El parametro composition controla como interactuan las animaciones superpuestas. replace (predeterminado) intercambia valores durante la animacion, blend interpola entre valores superpuestos y none las ejecuta de forma independiente.

Cuando multiples animaciones afectan la misma propiedad simultaneamente, el modo composition determina el comportamiento:

// Ejemplo Blend -- dos animaciones de color superpuestas se fusionan suavemente
animate('.box', {
  backgroundColor: { to: '#f00' },
  duration: 1000,
});

animate('.box', {
  backgroundColor: { to: '#00f' },
  duration: 1000,
  delay: 500,
  composition: 'blend', // Interpola rojo -> azul a traves de purpura
});

Fisica de Resortes con createSpring

Respuesta directa: createSpring() genera funciones de suavizado basadas en fisica con parametros para mass, stiffness, damping, velocity y bounce (v4.2+). Pase el resultado al parametro ease para un movimiento natural impulsado por la fisica.

La fisica de resortes aporta un nivel de movimiento natural que las curvas de suavizado tradicionales no pueden igualar. Anime.js v4 convierte esto en una caracteristica de primera clase:

import { animate, createSpring } from 'animejs';

const spring = createSpring({
  mass: 1,        // Mas pesado = oscilacion mas lenta
  stiffness: 200, // Mas alto = mas rapido
  damping: 10,    // Mas alto = menos rebote
  velocity: 0,    // Velocidad inicial
  bounce: 0.5,    // (v4.2+) Controlar fuerza de rebote, 0-1
});

animate('.ball', {
  translateY: { to: 300 },
  ease: spring,
  loop: true,
  alternate: true,
});

Comparacion de Parametros de Resortes

Lineas de Tiempo y Posiciones de Etiqueta

Respuesta directa: createTimeline() crea animaciones secuenciadas con metodos add() y set(). La linea de tiempo v4 admite posiciones de etiqueta (<<, <=, LABEL_NAME), desplazamientos explicitos (+=500, -=200) y nuevos metodos como .call(), .sync(), .label() y .set().

Las lineas de tiempo en v4 se han mejorado significativamente. Las etiquetas reemplazan el antiguo sistema de posicion con una sintaxis mucho mas legible:

import { createTimeline } from 'animejs/timeline';

const tl = createTimeline({
  defaults: { ease: 'outQuad', duration: 300 },
  loop: 1,
});

// Anadir animaciones con etiquetas de posicion
tl.add('.box-a', { x: { to: 200 } })            // Comienza inmediatamente
  .add('.box-b', { scale: { to: 1.5 } }, '+=200')  // 200ms despues de que termine la anterior
  .add('.box-c', { rotate: { to: 180 } }, '<<')     // Inicio de la animacion anterior
  .label('midpoint')                                 // Marcador con nombre
  .add('.box-d', { y: { to: 100 } }, 'midpoint')    // En la etiqueta
  .add('.box-e', { opacity: { to: 0 } }, 'midpoint+=500') // 500ms despues de la etiqueta
  .play();

Sintaxis de Posicion en Linea de Tiempo

sequenceDiagram
    participant t0 as 0ms
    participant t1 as +300ms
    participant t2 as +600ms
    participant t3 as +900ms
    
    Note over t0: tl.add(box-a, { x: 200 })
    Note over t1: tl.add(box-b, { scale: 1.5 }, '+=200')
    Note over t2: tl.add(box-c, { rotate: 180 }, '<<')
    Note over t3: tl.add(box-d, { y: 100 }, 'midpoint')

Modulo de Animacion SVG

Respuesta directa: El modulo SVG de animejs/svg proporciona createMotionPath (seguir una ruta), createDrawable (animacion de dibujo de lineas) y morphing incorporado entre formas SVG – todo impulsado por la funcion central animate().

La animacion SVG es una de las caracteristicas emblematicas de Anime.js. V4 organiza esto en un modulo dedicado:

Ruta de Movimiento

import { animate } from 'animejs';
import { createMotionPath } from 'animejs/svg';

const { translateX, translateY, rotate } = createMotionPath('#path');

animate('.car', {
  translateX,
  translateY,
  rotate,
  duration: 3000,
  ease: 'outQuint',
});

La funcion createMotionPath ahora admite un parametro offset (v4.2.1) para posicionar elementos relativos a la ruta.

Dibujo de Lineas (createDrawable)

import { createDrawable } from 'animejs/svg';

const drawable = createDrawable('#my-path'); // o createDrawable('path')

animate(drawable, {
  draw: '0 1', // Desde 0% hasta 100% dibujado
  duration: 2000,
  ease: 'outQuad',
});

Morphing de Formas

// Transformar una ruta en otra
animate('#shape', {
  d: { to: '#target-shape' }, // Datos de ruta para morphing
  duration: 1500,
  ease: 'inOutQuint',
});

Animacion de Texto con splitText

Respuesta directa: splitText() de animejs/text divide el texto en caracteres, palabras y lineas usando la API Intl.Segmenter del navegador. Envuelve cada segmento en un elemento HTML configurable para animacion por segmento.

El modulo de texto hace que la revelacion de texto y la tipografia cinetica sean sencillas:

import { splitText } from 'animejs/text';

const split = splitText({
  text: 'Anime.js v4 makes text dance!',
  by: 'word',      // 'char' | 'word' | 'line' | 'all'
  tag: 'span',     // Elemento HTML para envolver cada segmento
});

Luego puede animar los nodos resultantes individualmente:

import { animate, stagger } from 'animejs';

animate(split.nodes, {
  translateY: { from: -20, to: 0 },
  opacity: { from: 0, to: 1 },
  duration: 600,
  delay: stagger(50), // Escalonar cada palabra/caracter
  ease: 'outQuad',
});

Opciones de splitText

Interacciones Arrastrables

Respuesta directa: createDraggable() de animejs/draggable permite interacciones de arrastrar, ajustar, lanzar y arrojar. Se combina con createSpring() para suavizado de liberacion basado en fisica y admite limites, objetivos de ajuste y umbrales de arrastre.

Draggable es un modulo nuevo en v4 que proporciona interacciones completas de arrastrar y soltar:

import { createDraggable, createSpring } from 'animejs';

const drag = createDraggable({
  el: '.card',
  container: '.stack',
  bounds: { x: [0, 400], y: [0, 400] },
  releaseEase: createSpring({ stiffness: 150, damping: 15 }),
  dragThreshold: 10,   // (v4.2.1+) Minimo px antes de que comience el arrastre
  onStart: () => {},
  onDrag: () => {},
  onDrop: () => {},
  onSnap: () => {},
});

// Posteriormente
drag.destroy();

Configuracion de Arrastrable

createScope para Integracion con Frameworks

Respuesta directa: createScope() proporciona un entorno con ambito con metodos auxiliares como qs(), qsa() y registerMethod(), ademas de un metodo revert() para limpieza – ideal para ciclos de vida de componentes Svelte, React o Vue.

La integracion con frameworks es una preocupacion de primera clase en v4. createScope() elimina la gestion manual de selectores de consulta y las fugas de memoria:

import { createScope } from 'animejs/scope';

// Dentro de Svelte onMount / React useEffect
const scope = createScope({ root: containerElement });

// Selectores de consulta con ambito
scope.qs('.card');    // Solo dentro de la raiz
scope.qsa('.item');   // Todos los elementos coincidentes en la raiz

// Registrar metodos personalizados
scope.registerMethod('customAnimation', (el) => {
  animate(el, { scale: 1.2 });
});

// Limpieza al desmontar
onDestroy(() => scope.revert());

Integracion WAAPI

Respuesta directa: El modulo WAAPI (waapi de animejs) proporciona la misma sintaxis de Anime.js pero impulsa las animaciones a traves de la API de Animaciones Web nativa del navegador, produciendo un paquete de 3 KB. Soporta la misma firma animate(), stagger() y funciones de suavizado.

Para proyectos donde el tamano del paquete es critico, la integracion WAAPI ofrece una alternativa convincente:

import { waapi, stagger } from 'animejs';

waapi.animate('span', {
  translate: '0 -2rem',
  delay: stagger(100),
  duration: 600,
  loop: true,
  alternate: true,
  ease: 'inOut(2)',
});

Cuando usar WAAPI vs. el motor principal:

Configuracion del Motor y Rendimiento

Respuesta directa: El modulo engine expone configuraciones globales que incluyen el limite de velocidad de fotogramas (hasta 240 FPS en v4.3), parametros predeterminados, unidad de tiempo de reproduccion y comportamiento de pausa automatica cuando el documento esta oculto.

Configuraciones del Motor

import { engine } from 'animejs';

engine.defaults = { duration: 500, ease: 'outQuad' }; // Valores predeterminados globales
engine.useDefaultMainLoop = false;  // Deshabilitar bucle incorporado
engine.update();                     // Actualizacion manual de fotogramas
engine.pauseOnDocumentHidden = true; // Pausar cuando la pestana esta oculta
engine.timeUnit = 'ms';             // 'ms' o 's'
engine.precision = 2;               // Precision decimal para valores

Puntos de Referencia de Rendimiento

El motor de renderizado de Anime.js v4 se ha optimizado para animaciones a gran escala:

Soporte de Navegadores

Anime.js v4 no es compatible con Internet Explorer.

Historial de Versiones: v4.2 y v4.3

Respuesta directa: La serie v4.2 (septiembre de 2025) anadio el bounce de resorte, suavizados WAAPI, valores de variables CSS e importaciones de subruta. La serie v4.3 (enero–febrero de 2026) anadio createLayout, aumento el maximo FPS a 240 y envio multiples correcciones de errores.

La biblioteca ha sido mantenida activamente durante 2025 y 2026 con un ritmo de publicacion rapido:

timeline
    title Linea de Tiempo de Lanzamientos Anime.js v4 (2025-2026)
    April 2025 : v4.0.0 : Reescritura de API modular
    September 2025 : v4.2.0 : Rebote de resorte, importaciones de subruta
    October 2025 : v4.2.1 : Desplazamiento SVG, dragThreshold
    January 2026 : v4.3.0 : createLayout, 240 FPS
    January 2026 : v4.3.1-3.5 : Serie de correcciones de errores
    February 2026 : v4.3.6 : Diseno de sincronizacion de desplazamiento

Lecturas Adicionales y Recursos

• Sitio Web Oficial de Anime.js – Documentacion completa, demostraciones en vivo y area de juegos
• Repositorio de GitHub: juliangarnier/anime – Codigo fuente, incidencias y versiones
• Paquete npm: animejs – Ultima version e instalacion
• Wiki de Cambios Importantes de Anime.js v4 – Guia oficial de migracion de v3 a v4
• Referencia de API de DeepWiki – Documentacion completa de API mantenida por la comunidad
• Anime.js en libs.tech – Analisis de dependencias y desglose de tamano de paquete

Anime.js es creado y mantenido por Julian Garnier y se publica bajo la licencia MIT. Esta guia fue compilada a partir de la documentacion oficial de animejs.com, el repositorio de GitHub juliangarnier/anime y recursos de la comunidad. Ultima actualizacion: 2 de mayo de 2026.