가로 잡음 띠가 위아래로 지나가며 띠 뒤쪽이 다음 장면으로 바뀐다A horizontal noise band sweeps up or down, and everything behind it becomes the next scene.
높이 화면의 12%인 잡음 띠가 550ms 동안 위에서 아래로 지나가고, 띠가 지나간 위쪽은 이미 다음 장면이다
띠에 잡음이 없어 단색 바처럼 보이거나, 띠 뒤쪽이 아직 이전 장면이라 와이프 방향이 반대로 읽힌다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 550ms | 400~800ms | linear |
| 띠 높이 | 화면의 12% | 8~20% | 129px |
| 방향 | 위에서 아래 | 상하좌우 | 읽는 순서와 맞춘다 |
| 잡음 밝기 | 0.7 | 0.5~0.9 | 띠 안 |
| 최대 잡음 폭 | 0.5 | 0.3~0.5 | 원 셰이더 파라미터 |
const H = 1080, B = 130;
tl.fromTo('.band', { y: -B }, { y: H, duration: 0.55, ease: 'none' }, 0);
tl.fromTo('.next', { clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0% 0)', duration: 0.55, ease: 'none' }, 0);그대로 붙여 넣는다Paste as is
<대상> 장면 전환에 노이즈 띠 와이프를 넣어줘. 높이 130px 잡음 띠가 위에서 아래로 0.55초 linear로 지나가고, .next는 clipPath inset(0 0 100% 0)에서 inset(0 0 0% 0)로 같은 속도로 열려 띠 바로 뒤가 다음 장면이 되게 해. 띠의 잡음은 프레임 번호 시드로 그리고 타임라인 하나로 seek 가능하게 만들어줘.
Add a Static Band Wipe to <target>. A noise band 130px tall travels top to bottom over 0.55s with linear ease, while .next opens via clipPath inset(0 0 100% 0) to inset(0 0 0% 0) at the same speed, so everything just behind the band is the next scene. Seed the noise by frame number and keep one seekable GSAP timeline.
<파일>에 노이즈 띠 와이프를 구현해. .band y -130에서 1080, .next clipPath inset(0 0 100% 0)에서 inset(0 0 0% 0), 둘 다 0.55초 ease none. 0.1초, 0.27초, 0.45초 시점을 캡처해 띠 위쪽이 다음 장면, 아래쪽이 이전 장면인지, 띠 경계와 clip 경계가 어긋나지 않는지 확인해.
Implement Static Band Wipe in <file>. .band y -130 to 1080 and .next clipPath inset(0 0 100% 0) to inset(0 0 0% 0), both 0.55s ease none. Capture at 0.1s, 0.27s, and 0.45s to confirm the area above the band is the next scene, below is the previous scene, and the band edge and clip edge stay aligned.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo