Skip to content
Docs
훅으로 돌아가기

useOrchestration

@hua-labs/motion-core
출시 예정

다중 요소 오케스트레이션 및 시퀀스 애니메이션 (Pro)

기본 사용법

tsx
import { useOrchestration } from "@hua-labs/motion-core";

const { play, pause, stop, seek, progress, isPlaying } = useOrchestration({
  timeline: [
    { id: 'fade', duration: 300, onUpdate: (p) => setOpacity(p) },
    { id: 'slide', duration: 500, delay: 100, onUpdate: (p) => setTranslateY(p * -20) },
    { id: 'scale', duration: 300, onUpdate: (p) => setScale(0.8 + p * 0.2) },
  ],
  speed: 1,
  loop: true,
  loopCount: 3,
  onComplete: () => console.log('All done!'),
});

play();

라이브 데모

다중 요소 오케스트레이션

모든 요소가 스태거 딜레이로 함께 애니메이션됩니다

API 레퍼런스

useOrchestration Options

이름타입기본값설명
timelineMotionStep[][]Animation steps with id, duration, delay, ease, callbacks
speednumber1Playback speed multiplier
loopbooleanfalseEnable looping
loopCountnumber-1Number of loops (-1 = infinite)
reversebooleanfalsePlay timeline in reverse
autoStartbooleanfalseStart playback automatically on mount

Return Values

이름타입설명
play() => voidStart or resume playback
pause() => voidPause playback
stop() => voidStop and reset to beginning
seek(time: number) => voidJump to a specific time in the timeline
progressnumberCurrent progress (0 to 1)
isPlayingbooleanWhether the timeline is currently playing

사용 사례

페이지 전환

부드러운 페이지 간 전환 효과

온보딩 플로우

단계별 안내 애니메이션

데이터 시각화

차트 및 데이터 순차 등장 효과

복잡한 UI 상태

다단계 UI 상태 전환 애니메이션