다음 장면이 시작되는 동안 이전 장면의 움직임을 잠시 유지하고 지연 구간 끝에서 새 장면을 공개한다While the next scene starts, the previous scene's motion is held briefly, and the new scene is revealed at the end of the delay.
이전 장면의 마지막 동작이 0.6초 더 이어지는 동안 다음 장면의 소리가 먼저 시작되고, 0.6초 뒤 화면이 바뀐다
유지 구간이 1초를 넘어 화면과 소리가 어긋난 것처럼 보이거나, 이전 장면 동작이 멈춰 화면이 굳는다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 이전 장면 유지 | 600ms | 400~800ms | 컷을 늦춤 |
| 공개 컷 | 0ms | 고정 | 즉시 |
| 소리 선행 | 600ms | 400~800ms | 다음 장면 소리 |
| 이전 장면 시계 | 독립 진행 | 두 장면 시계 분리 | |
| 다음 장면 시작 | 컷 시각 | 컷 시각에 정렬 |
const tPrev = gsap.timeline(), tNext = gsap.timeline();
tPrev.to('.ball', { x: 900, duration: 1.8, ease: 'power2.out' }, 0);
tl.add(tPrev, 0).add(tNext, 1.2); // 다음 장면 시계는 1.2초에 시작
tl.set('.prev', { autoAlpha: 0 }, 1.8).set('.next', { autoAlpha: 1 }, 1.8);그대로 붙여 넣는다Paste as is
<대상> 장면 전환에 이전 장면 유지 전환을 넣어줘. 이전 장면 타임라인은 1.8초까지 계속 진행하고, 다음 장면 타임라인은 1.2초에 시작해서 소리가 먼저 나오게 해. 화면 교체는 1.8초에 tl.set으로 즉시. 두 장면은 각각 자식 타임라인으로 만들어 tl.add로 붙이고 paused 타임라인으로 seek 가능하게 해.
Add a Held Scene Overlap to <target>. Keep the previous scene's timeline running until 1.8s, start the next scene's timeline at 1.2s so its sound comes first, and swap visibility at 1.8s with tl.set. Build each scene as a child timeline attached with tl.add, seekable on a paused parent timeline.
<파일>에 이전 장면 유지 전환을 구현해. tPrev는 .ball x 0에서 900을 1.8초 power2.out, tNext는 tl.add(tNext, 1.2), 1.8초에 .prev 숨김 및 .next 표시. 1.0초, 1.5초, 1.9초 시점을 캡처해 1.5초에 이전 장면 동작이 아직 진행 중인지, 1.9초에 다음 장면만 보이는지 확인해.
Implement Held Scene Overlap in <file>. tPrev tweens .ball x 0 to 900 over 1.8s power2.out; tl.add(tNext, 1.2); at 1.8s hide .prev and show .next. Capture at 1.0s, 1.5s, and 1.9s to confirm the previous action is still in progress at 1.5s and only the next scene is visible at 1.9s.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo