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

점선 흐름Dashed Flow

Dashed Flow
점선 흐름
다른 이름Also known as · Connector Flow · 연결선 흐름 · line-connector-draw · svg-icon-enrichment · SVG Dashed Flow · SVG 점선 흐름 · Marching dashes
375
렌더 추가 예정CLIP COMING점선 흐름Dashed Flow정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 375. 점선 흐름 · Dashed Flow · none

노드 사이 선이 그려진 뒤 점선 무늬가 한 방향으로 흐른다.A connector is revealed before its dash pattern moves in one direction.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
데이터가 어디에서 어디로 전달되는지 파악한다.Clarifies where information flows.
언제 쓰나Use whenUSE WHEN
  • 연결선을 600ms에 공개한 뒤 점선을 목적지 방향으로 흘린다.
  • 데이터가 어디에서 어디로 전달되는지 파악한다. 기준값과 대상을 함께 표시할 때.
  • Show the direction of data transfer.
  • 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

연결선을 600ms에 공개한 뒤 점선을 목적지 방향으로 흘린다.

과용 · 나쁜 사례OVERUSE

점선이 왕복해 전달 방향을 알 수 없게 한다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
선 공개600ms300~1000ms점선 흐름 전에 실행
점선 간격8px/8px4px/4px~12px/12px한 패턴 16px
흐름 주기1200ms600~2000ms한 패턴 이동 기준
GSAP
const tl=gsap.timeline({paused:true}),L=reveal.getTotalLength();
gsap.set(reveal,{strokeDasharray:L,strokeDashoffset:L});
gsap.set(flow,{strokeDasharray:'8 8',opacity:0});
tl.to(reveal,{strokeDashoffset:0,duration:0.6,ease:'none'},0);
tl.set(reveal,{opacity:0},0.6).set(flow,{opacity:1},0.6);
tl.fromTo(flow,{strokeDashoffset:0},{strokeDashoffset:-16,duration:1.2,ease:'none'},0.6);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 점선 흐름을 적용해. SVG path dashoffset을 선 공개와 점선 이동의 두 단계로 구동한다. 선 공개 600ms; 점선 간격 8px/8px; 흐름 주기 1200ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement Dashed Flow on <target> in <file>. Reveal the connector over 600ms, then move an 8px dash and 8px gap pattern by exactly 16px over 1200ms. Use separate reveal and flow paths to preserve the dashed pattern. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 점선 흐름을 적용해. SVG path dashoffset을 선 공개와 점선 이동의 두 단계로 구동한다. 선 공개 600ms; 점선 간격 8px/8px; 흐름 주기 1200ms을 적용한다. 0초, 0.9초, 1.8초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Dashed Flow on <target> in <file>. Reveal the connector over 600ms, then move an 8px dash and 8px gap pattern by exactly 16px over 1200ms. Use separate reveal and flow paths to preserve the dashed pattern. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.9s, and 1.8s 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 시 1.8초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 선 공개 600ms; 점선 간격 8px/8px; 흐름 주기 1200ms을 싣고 연결선을 600ms에 공개한 뒤 점선을 목적지 방향으로 흘린다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 1.8초 구간에 매핑한다. 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