동작 중첩Temporal Overlap

Temporal Overlap

동작 중첩

다른 이름Also known as · Overlapping choreography · 겹치는 동작 순서 · Temporal overlap · 시간 겹침

026

렌더 추가 예정CLIP COMING동작 중첩Temporal Overlap정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 026. 동작 중첩 · Temporal Overlap · power3.out

첫 요소가 멈추기 전에 다음 요소의 움직임이 시작되어 동작이 물결처럼 이어지는 순서The next element starts moving before the first has stopped, so motion flows in a wave.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

서로 연결된 행동과 유려한 흐름. 딱딱한 순차 재생보다 자연스럽다Connected actions and fluid flow. Smoother than strict sequencing.

언제 쓰나Use whenUSE WHEN

카드·아이콘 여러 개가 차례로 들어오되 끊기지 않게 하고 싶을 때
한 요소의 도착이 다음 요소의 출발을 이끄는 연쇄를 표현할 때

When cards or icons enter in turn without a break
When one element's arrival should trigger the next in a chain

과용 주의AvoidAVOID

겹침은 개별 길이의 15~35%
3개 이상 연쇄일 때는 겹침을 일정하게
읽어야 할 텍스트가 든 카드는 겹침을 줄인다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드 3장이 각각 0.6초 동안 들어오되 다음 카드가 앞 카드 종료 0.15초 전에 출발한다

과용 · 나쁜 사례OVERUSE

겹침이 커서 전부 동시에 움직이는 것처럼 보이거나, 겹침이 없어 순차 재생과 차이가 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
개별 길이	0.6s	0.4~0.9s	한 요소의 tween
겹침	0.15s	0.1~0.25s	앞 요소 종료 전 시작 시간
이동 거리	40px	24~80px	1920x1080 기준
이징	power3.out	power2~power4.out	도착이 부드럽게

GSAP

['.c1', '.c2', '.c3'].forEach((s, i) => tl.from(s, { opacity: 0, y: 40, duration: 0.6, ease: 'power3.out' }, 0.3 + i * (0.6 - 0.15)));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 카드 .c1, .c2, .c3가 겹치는 순서로 들어오게 해줘. 각 카드는 opacity 0, y +40px에서 0.6초 power3.out으로 나타나고, 다음 카드는 앞 카드 종료 0.15초 전에 시작해. 시작은 0.3초. paused 타임라인 하나로 position 값을 계산해 넣어.

Have cards .c1, .c2 and .c3 of <target> enter with overlap in GSAP. Each animates from opacity 0, y +40px over 0.6s with power3.out, and the next starts 0.15s before the previous ends. Start at 0.3s. Compute positions on one paused timeline.

Codex

<파일>의 <대상>에 temporal-overlap을 적용해. forEach에서 from({opacity 0, y 40}, 0.6s, power3.out)을 position 0.3+i*0.45에 건다. 0.5초·0.8초·1.4초를 캡처해 카드 i가 끝나기 전에 i+1이 움직이기 시작했는지 확인해.

Apply temporal-overlap to <target> in <file>. In forEach add from({opacity 0, y 40}, 0.6s, power3.out) at position 0.3 + i*0.45. Capture at 0.5s, 0.8s and 1.4s to check that item i+1 starts moving before item i has finished.