타임라인 사건 전개Timeline Scrub

Timeline Scrub

타임라인 사건 전개

다른 이름Also known as · Timeline scrub narrative · 타임라인 따라 역사 전개 · Timed event captions · 시간별 사건 캡션

401

렌더 추가 예정CLIP COMING타임라인 사건 전개Timeline Scrub정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 401. 타임라인 사건 전개 · Timeline Scrub · power2.inOut

시간축의 재생 표시가 이동하고 해당 시점의 사건 카드나 지도 상태가 나타난다.A playhead moves along a time axis and reveals the event or map state at each date.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

사건의 선후와 변화를 시간에 연결한다.Connects chronological order to changing states.

언제 쓰나Use whenUSE WHEN

타임라인 사건 전개으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using timeline scrub.
Present corresponding elements in a readable sequence within the same view.

과용 주의AvoidAVOID

시간축과 사건 카드가 서로 다른 시점을 표시한다.
설명 라벨과 대응 색을 동작 중에 바꾸지 않는다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 발표Presentation 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

시간축 표시가 연도에 도착하면 대응 사건 카드를 밝힌다.

과용 · 나쁜 사례OVERUSE

시간축과 사건 카드가 서로 다른 시점을 표시한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	1.2s	0.84~1.68s	첫 동작 또는 후보의 기본 단계 길이
표시 이동	500ms	300~700ms	사건 도착 때 카드를 바꾼다
이징	power2.inOut	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
events.forEach((card,i)=>{
  tl.to(marker,{x:i*240,duration:0.5,ease:"power2.inOut"},i*1.2);
  tl.set(events,{opacity:0},i*1.2+0.5);
  tl.set(card,{opacity:1},i*1.2+0.5);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 타임라인 사건 전개을 적용해. 시간축의 재생 표시가 이동하고 해당 시점의 사건 카드나 지도 상태가 나타난다. 시간값으로 축 표시와 사건 그룹의 opacity를 동기 갱신한다. 기본 지속은 1.2s, 표시 이동은 500ms, 이징은 power2.inOut로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Timeline Scrub to <target> in <file>. A playhead moves along a time axis and reveals the event or map state at each date. Use a base duration of 1.2s and power2.inOut; use 500ms marker travel at 1200ms event intervals and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 타임라인 사건 전개을 적용해. 기본 지속은 1.2s, 표시 이동은 500ms, 이징은 power2.inOut로 설정한다. 0초, 0.6초, 1.2초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Timeline Scrub in the explanatory scene of <file> for <target>, using 1.2s and power2.inOut with 500ms marker travel at 1200ms event intervals. Capture at 0, 0.6, and 1.2 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.