Anime.js v4
Verificado en octubre de 2026: animejs 4.5.
npm i animejs
import { animate, createTimeline, stagger, svg, utils, createScope } from 'animejs'
v3 → v4 (los tutoriales antiguos usan v3)
| v3 | v4 |
|---|---|
anime({ targets, ... }) | animate(targets, { ... }) |
easing: 'easeOutQuad' | ease: 'outQuad' ('inOutExpo', 'inOut(3)', ...) |
anime.timeline() | createTimeline() |
direction: 'alternate' | alternate: true |
update, complete, begin | onUpdate, onComplete, onBegin |
Las duraciones y retrasos están en milisegundos (GSAP usa segundos).
animate
animate('.square', {
x: 320, // forma abreviada de translateX
rotate: { from: -180 },
opacity: [0, 1], // [desde, hasta]
duration: 1250,
delay: stagger(65, { from: 'center' }),
ease: 'inOutQuint',
loop: true,
alternate: true,
})
Objetivos: selector CSS, elemento(s) o un objeto plano (animate(obj, { value: 100, onUpdate: () => draw(obj.value) })).
Timeline
const tl = createTimeline({ defaults: { duration: 600, ease: 'outExpo' } })
tl.add('.title', { opacity: [0, 1], y: [40, 0] })
.add('.sub', { opacity: [0, 1] }, '-=300') // 300 ms antes del final anterior
.add('.dot', { scale: [0, 1], delay: stagger(80) }, '<<') // con el inicio anterior
Posiciones: 100 ms absolutos · '+=100' / '-=100' relativo al final anterior · '<' final anterior · '<<' inicio anterior · '<<+=250' · 'Etiqueta' (definir con tl.label('Etiqueta')) · stagger(10).
SVG
animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1'], duration: 2000 }) // dibujado de trazo, valores 0–1 "inicio fin"
animate('#shapeA', { d: svg.morphTo('#shapeB'), duration: 800 }) // transformar la ruta A en B
animate('.car', { ...svg.createMotionPath('#road'), duration: 4000 }) // seguir una ruta (x, y, rotate)
Reproducción / scrubbing
autoplay: false, luego .play(), .pause(), .restart(), .reverse(), .seek(ms), .complete(), .cancel(), .revert() (deshace todos los estilos en línea).
React
const root = useRef(null)
useEffect(() => {
const scope = createScope({ root }).add(() => {
animate('.box', { x: 200 }) // los selectores están limitados al root
})
return () => scope.revert()
}, [])
Para video
Anime.js funciona con su propio reloj. Dentro de Remotion, constrúyelo pausado y busca por fotograma — nunca permitas que se reproduzca automáticamente:
const frame = useCurrentFrame()
const { fps } = useVideoConfig()
const tl = useRef(null)
useLayoutEffect(() => {
tl.current = createTimeline({ autoplay: false }).add('.title', { y: [40, 0], opacity: [0, 1] })
return () => tl.current.revert()
}, [])
useLayoutEffect(() => { tl.current.seek((frame / fps) * 1000) }, [frame, fps])
Prefiere el propio interpolate / spring de Remotion para movimientos simples; recurre a Anime.js cuando sus ayudas SVG (draw, morph, motion path) o sus escalonados ahorren trabajo real.