phido0410/animejs

Anime.js v4

2026-10 確認: animejs 4.5。

npm i animejs

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

v3 → v4（古いチュートリアルは 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

持続時間と遅延はミリ秒単位です（GSAPは秒単位）。

animate

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

ターゲット：CSSセレクター、要素、またはプレーンオブジェクト（animate(obj, { value: 100, onUpdate: () => draw(obj.value) })）。

タイムライン

const tl = createTimeline({ defaults: { duration: 600, ease: 'outExpo' } })
tl.add('.title', { opacity: [0, 1], y: [40, 0] })
  .add('.sub',   { opacity: [0, 1] }, '-=300')       // 前の終了の300ミリ秒前
  .add('.dot',   { scale: [0, 1], delay: stagger(80) }, '<<') // 前の開始と同時

位置指定：100 絶対ミリ秒 ・ '+=100' / '-=100' 前の終了を基準に相対指定 ・ '<' 前の終了 ・ '<<' 前の開始 ・ '<<+=250' ・ 'Label'（tl.label('Label') で設定） ・ stagger(10)。

SVG

animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1'], duration: 2000 }) // ストローク描画、値0～1「開始 終了」
animate('#shapeA', { d: svg.morphTo('#shapeB'), duration: 800 })                // パスAをBにモーフィング
animate('.car', { ...svg.createMotionPath('#road'), duration: 4000 })            // パスに沿って移動（x, y, rotate）

再生/スクラブ

autoplay: false を設定後、.play()、.pause()、.restart()、.reverse()、.seek(ms)、.complete()、.cancel()、.revert()（インラインスタイルをすべて元に戻す）を使用。

React

const root = useRef(null)
useEffect(() => {
  const scope = createScope({ root }).add(() => {
    animate('.box', { x: 200 })     // セレクターはroot内にスコープされる
  })
  return () => scope.revert()
}, [])

動画向け

Anime.jsは独自のクロックで動作します。Remotion内では、一時停止状態で構築し、フレームごとにシークしてください。自動再生は絶対にさせないでください。

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

単純な動きには Remotion 自身の interpolate / spring を優先し、SVGヘルパー（draw, morph, motion path）や stagger が実際の作業を削減する場合に Anime.js を利用してください。