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') // 이전 항목 종료 300ms 전
.add('.dot', { scale: [0, 1], delay: stagger(80) }, '<<') // 이전 항목 시작과 동시에
위치: 100 절대 ms · '+=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 내에서는 일시 중지 상태로 구축하고 프레임별로 seek하십시오. 절대 자동 재생하지 마십시오:
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 도우미(그리기, 변형, 모션 경로) 또는 스태거가 실제 작업을 절약할 때 Anime.js를 사용하십시오.