Anime.js (v4) es una librería de animación para JavaScript, ligera y sin
dependencias, que anima propiedades CSS, transforms, SVG, atributos y objetos JS.
Se instala con npm install animejs. A continuación los casos de uso
con sus scripts minimalistas extraídos de la documentación oficial, el grafo
animado del ciclo de una animación y la referencia de la API.
animate()La llamada más corta posible: anima una propiedad de un elemento.
// npm install animejs
import { animate } from 'animejs';
// Mueve .cuadrado 250px a la derecha con rebote.
animate('.cuadrado', {
translateX: 250,
duration: 800,
ease: 'outBounce',
});
// Repetición en bucle, yendo y viniendo.
animate('.cuadrado', {
translateX: 250,
loop: true,
alternate: true,
});animate(targets, params) crea y arranca la animación.targets puede ser un selector CSS, elemento, objeto JS o array.translateX es una transformación animable; duration en ms; ease es la curva de avance.loop repite y alternate invierte la dirección en cada ciclo.translateX, no el
transform compuesto) y usa ease (en v3 era easing).
Coordina varias animaciones en el tiempo: en secuencia, a la vez o solapadas.
import { createTimeline } from 'animejs';
const tl = createTimeline({ defaults: { duration: 750 } });
tl.label('inicio') // marca reutilizable
.add('.cuadrado', { x: '15rem' }, 500) // empieza en el ms 500
.add('.circulo', { x: '15rem' }, 'inicio') // a la vez que 'inicio'
.add('.triangulo', { x: '15rem', rotate: '1turn' }, '<-=500'); // 500ms antes de acabarcreateTimeline() sincroniza animaciones, timers y callbacks..add(target, params, position) encola una animación en una posición de tiempo.label(), o relativas '<-=' (al final) / '-=' (al inicio).defaults aplica parámetros comunes a todos los hijos.tl.play(), tl.pause(), tl.reverse().
Distribuye valores y retardos de forma progresiva entre múltiples elementos.
import { animate, stagger } from 'animejs';
animate('.item', {
x: '17rem',
scale: stagger([1, .1]), // valores progresivos por elemento
delay: stagger(100), // 100ms entre cada elemento
});stagger(value) devuelve un valor de función que se distribuye entre los targets.delay → escala el tiempo (cada elemento empieza 100ms después).scale, x, rotate) → cada elemento recibe un valor distinto.from (first/last/center/edges) y grid para escalonar en tablero.
Controla una animación desde el código: pausar, reanudar, invertir, reiniciar o saltar.
import { animate } from 'animejs';
const anim = animate('.logo', {
translateX: 200,
duration: 1000,
loop: true,
alternate: true,
});
anim.pause(); // pausar
anim.play(); // reanudar
anim.reverse(); // invertir dirección
anim.restart(); // reiniciar desde 0
anim.seek(500); // saltar al ms 500
anim.complete(); // ir al final (onComplete)animate() devuelve una instancia con métodos de control.autoplay: false la animación no arranca sola y el código decide cuándo.onBegin, onUpdate, onComplete, onLoop) avisan de los eventos.revert() quita los estilos inline que dejó la animación (útil en interfaces).
El token 🟠 recorre el flujo en orden. Clic en el gráfico reinicia la animación.
| Función | Qué hace |
|---|---|
animate(targets, params) | Crea y reproduce una animación |
createTimeline(params) | Línea de tiempo con .add(), .label(), posiciones |
stagger(value) | Valores/retardos progresivos entre targets |
splitText() / scrambleText() | Animación de texto (letras/palabras) y efecto "descifrado" |
onScroll() | Animaciones vinculadas al scroll (ScrollObserver) |
morphTo() / createMotionPath() | SVG: morphing y recorrido por trazado |
waapi.animate() | Versión ligera (3KB) sobre la Web Animations API |
| Parámetro | Qué es |
|---|---|
duration · delay · ease | Parámetros del tween |
loop · alternate · reversed · autoplay | Ajustes de reproducción |
onBegin · onUpdate · onComplete · onLoop | Callbacks del ciclo de vida |
play() · pause() · reverse() · seek() · revert() | Métodos de control |
C:\Users\TUF\Documents\librerías\local\ antes de instalar.
Instalación: npm install animejs. Docs:
https://animejs.com/documentation.