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；當 Anime.js 的 SVG 輔助功能（繪製、形變、運動路徑）或交錯效果能大幅簡化工作時，再考慮使用它。