가로 주사선 일부가 옆으로 흔들리고 어두운 스캔선이 생기며 장면이 교차한다Some horizontal scan lines wobble sideways, dark scan bars appear, and the scenes cross over.
700ms 동안 주사선 120개 중 일부가 사인 변위로 최대 60px 흔들리고 어두운 스캔선이 지나가며 장면이 교차한다
모든 줄이 같은 위상으로 흔들려 화면이 통째로 좌우로 움직이거나, 흔들림이 끝까지 지속돼 다음 장면이 안 정리된다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 700ms | 500~1000ms | linear |
| 주사선 수 | 120 | 80~160 | 줄 높이 9px |
| 최대 변위 | 60px | 30~80px | 정점 진행 50% |
| 영향 줄 비율 | 35% | 25~50% | 일부만 |
| 스캔선 opacity | 0.35 | 0.2~0.5 | 어두운 가로줄 |
const s = { p: 0 };
tl.to(s, { p: 1, duration: 0.7, ease: 'none', onUpdate: () => {
const k = Math.sin(Math.PI * s.p);
document.querySelectorAll('.line').forEach((el, i) => {
const on = (i * 7) % 20 < 7;
el.style.transform = `translateX(${on ? Math.sin(i + s.p * 12) * 60 * k : 0}px)`;
});
} }, 0);그대로 붙여 넣는다Paste as is
<대상> 장면 전환에 TV 트래킹 전환을 넣어줘. 화면을 120개 가로 줄로 나눠 그중 약 35%만 translateX가 sin(i + p*12)*60*sin(pi*p) 픽셀로 흔들리게 하고, 0.7초 linear로 진행해. 진행 50%에 다음 장면으로 교체하고, 0.35 opacity 어두운 스캔선 줄이 위에서 아래로 한 번 지나가게 해. paused 타임라인 하나에서 p만 보간해 seek 가능하게 해.
Add a TV Tracking Transition to <target>. Split the frame into 120 horizontal lines and shift about 35% of them with translateX = sin(i + p*12) * 60 * sin(pi*p) px, over 0.7s with linear ease. Swap to the next scene at 50% progress, and run a 0.35-opacity dark scan bar down the frame once. Interpolate only p on one paused timeline so it seeks deterministically.
<파일>에 TV 트래킹 전환을 구현해. p 0에서 1, 0.7초 linear, 줄 120개 중 (i*7)%20<7인 줄만 translateX=sin(i+p*12)*60*sin(pi*p). 0.35초에 .next 표시. 0.1초, 0.35초, 0.6초, 0.7초 시점을 캡처해 정점에서 일부 줄만 어긋나는지, 0.7초에 모든 줄이 0px인지 확인해.
Implement TV Tracking Transition in <file>. p 0 to 1 over 0.7s linear; only lines where (i*7)%20<7 get translateX=sin(i+p*12)*60*sin(pi*p). Show .next at 0.35s. Capture at 0.1s, 0.35s, 0.6s, and 0.7s to confirm only some lines are displaced at the peak and every line is at 0px at 0.7s.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo