Anime.js v4
Vérifié le 2026-10 : animejs 4.5.
npm i animejs
import { animate, createTimeline, stagger, svg, utils, createScope } from 'animejs'
v3 → v4 (les anciens tutoriels utilisent 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 |
Les durées et délais sont en millisecondes (GSAP utilise les secondes).
animate
animate('.square', {
x: 320, // raccourci pour translateX
rotate: { from: -180 },
opacity: [0, 1], // [from, to]
duration: 1250,
delay: stagger(65, { from: 'center' }),
ease: 'inOutQuint',
loop: true,
alternate: true,
})
Cibles : sélecteur CSS, élément(s) ou un objet brut (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 avant la fin précédente
.add('.dot', { scale: [0, 1], delay: stagger(80) }, '<<') // avec le début précédent
Positions : 100 ms absolues · '+=100' / '-=100' relatif à la fin précédente · '<' fin précédente · '<<' début précédent · '<<+=250' · 'Label' (défini avec tl.label('Label')) · stagger(10).
SVG
animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1'], duration: 2000 }) // dessin progressif du trait, valeurs 0–1 "début fin"
animate('#shapeA', { d: svg.morphTo('#shapeB'), duration: 800 }) // morphose du chemin A en B
animate('.car', { ...svg.createMotionPath('#road'), duration: 4000 }) // suivre un chemin (x, y, rotate)
Contrôle / scrutation
autoplay: false, puis .play(), .pause(), .restart(), .reverse(), .seek(ms), .complete(), .cancel(), .revert() (annule tous les styles en ligne).
React
const root = useRef(null)
useEffect(() => {
const scope = createScope({ root }).add(() => {
animate('.box', { x: 200 }) // les sélecteurs sont limités à root
})
return () => scope.revert()
}, [])
Pour la vidéo
Anime.js fonctionne avec sa propre horloge. Dans Remotion, construisez-le en pause et scrutez image par image — ne le laissez jamais en lecture automatique :
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])
Préférez les propres interpolate / spring de Remotion pour les mouvements simples ; utilisez Anime.js quand ses helpers SVG (dessin, morphose, trajectoire) ou ses staggers vous font gagner du temps.