phido0410/animejs

Anime.js v4

Verificado em 2026-10: animejs 4.5.

npm i animejs

import { animate, createTimeline, stagger, svg, utils, createScope } from 'animejs'

v3 → v4 (tutoriais antigos usam 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

Durações e atrasos são em milissegundos (GSAP usa segundos).

animate

animate('.square', {
  x: 320,                       // atalho para translateX
  rotate: { from: -180 },
  opacity: [0, 1],              // [de, para]
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true,
})

Alvos: seletor CSS, elemento(s), ou um objeto simples (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 do fim anterior
  .add('.dot',   { scale: [0, 1], delay: stagger(80) }, '<<') // junto com o início anterior

Posições: 100 ms absolutos · '+=100' / '-=100' relativo ao fim anterior · '<' fim anterior · '<<' início anterior · '<<+=250' · 'Label' (definido com tl.label('Label')) · stagger(10).

SVG

animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1'], duration: 2000 }) // desenho por traço, valores 0–1 "início fim"
animate('#shapeA', { d: svg.morphTo('#shapeB'), duration: 800 })                // transformar path A em B
animate('.car', { ...svg.createMotionPath('#road'), duration: 4000 })            // seguir um caminho (x, y, rotate)

Playback / scrubbing

autoplay: false, depois .play(), .pause(), .restart(), .reverse(), .seek(ms), .complete(), .cancel(), .revert() (desfaz todos os estilos inline).

React

const root = useRef(null)
useEffect(() => {
  const scope = createScope({ root }).add(() => {
    animate('.box', { x: 200 })     // seletores são escopados ao root
  })
  return () => scope.revert()
}, [])

Para vídeo

Anime.js roda com seu próprio relógio. Dentro do Remotion, construa a animação pausada e avance quadro a quadro — nunca deixe ela tocar automaticamente:

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])

Prefira o próprio interpolate / spring do Remotion para movimentos simples; recorra ao Anime.js quando seus helpers SVG (draw, morph, motion path) ou staggers economizarem trabalho real.