AWESOME AI MOTION
효과Effects / 원리 도해Explainer / Nº 398

상태 전이 순회State Transition Walk

State Transition Walk
상태 전이 순회
다른 이름Also known as · Step Progress · 단계 진행 선 · progress-bar-linear-segmented · State-machine transition pulse · 상태 머신 전이 신호
398
도판Fig. 398. 상태 전이 순회 · State Transition Walk · none
재생 속도Speed

현재 노드가 켜지고 연결선을 따라 신호나 강조가 다음 노드로 이동한다. 도착한 노드가 새 활성 상태가 된다.A signal moves to the next node, which becomes the active state.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
단계 순서와 상태가 바뀌는 경로를 보여준다.Shows order and valid transition paths.
언제 쓰나Use whenUSE WHEN
  • 주문 접수에서 결제와 배송으로 현재 상태를 한 단계씩 넘긴다.
  • 단계 순서와 상태가 바뀌는 경로를 보여준다. 기준값과 대상을 함께 표시할 때.
  • Explain a sequence of state changes.
  • Keep the encoded values, labels, and visual state synchronized.
과용 주의AvoidAVOID
  • 허용되지 않은 전이선은 만들지 않는다.
분류TagsTAGS
원리 도해Explainer설명Explain순서·흐름Sequence설명 영상Explainer video제품 시연Product demo스크롤덱Scroll deck난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

주문 접수에서 결제와 배송으로 현재 상태를 한 단계씩 넘긴다.

과용 · 나쁜 사례OVERUSE

모든 상태를 동시에 활성 색으로 표시한다.

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
상태 수53~8현재 상태 한 개
전이 지속500ms300~800ms연결선 이동
도착 강조250ms150~400ms전이 뒤 시작
상태 유지700ms400~1200ms라벨 읽기 시간
GSAP
const tl=gsap.timeline({paused:true});
steps.slice(1).forEach((step,i)=>{
 const t=i*1.45;
 tl.fromTo(step.signal,{strokeDashoffset:step.length},{strokeDashoffset:0,duration:0.5,ease:'none'},t);
 tl.to(steps[i].node,{fill:'#64748b',duration:0.25},t+0.5);
 tl.to(step.node,{fill:'#22c55e',duration:0.25},t+0.5);
});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 상태 전이 순회을 적용해. SVG 연결선의 신호 위치와 노드 색을 상태 전이 시간표에 따라 함께 갱신한다. 상태 수 5; 전이 지속 500ms; 도착 강조 250ms; 상태 유지 700ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement State Transition Walk on <target> in <file>. Use 5 states, 500ms transitions, 250ms arrival emphasis, and 700ms state holds. Keep exactly one current node and draw only valid transitions. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 상태 전이 순회을 적용해. SVG 연결선의 신호 위치와 노드 색을 상태 전이 시간표에 따라 함께 갱신한다. 상태 수 5; 전이 지속 500ms; 도착 강조 250ms; 상태 유지 700ms을 적용한다. 0초, 3초, 6초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement State Transition Walk on <target> in <file>. Use 5 states, 500ms transitions, 250ms arrival emphasis, and 700ms state holds. Keep exactly one current node and draw only valid transitions. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 3s, and 6s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 상태 전이 순회 상태를 넣고 seek 시 6초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 상태 수 5; 전이 지속 500ms; 도착 강조 250ms; 상태 유지 700ms을 싣고 주문 접수에서 결제와 배송으로 현재 상태를 한 단계씩 넘긴다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 6초 구간에 매핑한다. scrub에서는 스프링 대신 power2.out을 쓰고 역방향에서도 라벨과 도형을 함께 갱신한다.
06

잘 맞는 조합Pairs well with

노드 연결망 구축 · Node-link Build
Nº 380노드 연결망 구축Node-link BuildNode-link Build
렌더 추가 예정CLIP COMING
경로 신호 빔Path Beam
387
Nº 387경로 신호 빔Path BeamPath Beam
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo