동심원 띠마다 서로 다른 확대율로 영상이 보이며 중심에서 장면이 교체되는 전환Concentric rings show the footage at different magnifications, and the scene is replaced from the center.
0.8초 동안 링 3개가 각각 1.0, 1.4, 2.0배의 서로 다른 확대율로 앞 장면을 샘플링하고 중심 링부터 뒤 장면으로 교체된다
링 개수가 많아 화면이 줄무늬처럼 어지럽거나, 링 경계가 톱니처럼 거칠다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 지속 | 0.8s | 0.6~1.2s | 선형 |
| 링 수 | 3 | 2~5 | 동심 |
| 확대율 | 1.0/1.4/2.0 | 1.0~3.0 | 안쪽일수록 큼 |
| 교체 순서 | 안에서 밖으로 | 링마다 0.1s 차이 |
gsap.utils.toArray('.ring').forEach((r, i) => {
const s = [1.0, 1.4, 2.0][i];
tl.to(r, { scale: s, duration: 0.8, ease: 'none' }, 0)
.to(r.querySelector('.b'), { opacity: 1, duration: 0.2, ease: 'none' }, 0.6 - i * 0.2);
});그대로 붙여 넣는다Paste as is
<대상A>에서 <대상B>로 링 줌 전환을 만들어줘. 화면 중심에 지름이 다른 동심원 링 3개를 만들고 각 링 안의 A가 0.8초 동안 scale 1.0, 1.4, 2.0까지 linear로 확대되게 해. 중심 링부터 0.2초 간격으로 B로 교체하고 링 경계에 2px 페더를 줘. paused 타임라인 하나.
Build a ring zoom from <targetA> to <targetB>. Create three concentric rings at the frame center and scale A inside each to 1.0, 1.4, and 2.0 linearly over 0.8 seconds. Swap to B starting with the center ring at 0.2-second intervals and feather the ring edges by 2px. One paused timeline.
<파일>에 ring zoom을 적용해. .ring 3개의 내부 scale을 1.0, 1.4, 2.0으로 0.8s ease none 확대하고 .b opacity 1을 안쪽 링부터 0.6, 0.4, 0.2초 시점에 0.2s로 올린다. 0.3초 캡처에서 링마다 확대율이 다른지, 0.8초에 전 링이 B인지 확인해.
Apply a ring zoom in <file>. Scale the inner content of 3 .ring elements to 1.0, 1.4, and 2.0 over 0.8s with ease none, and fade .b to opacity 1 (0.2s) starting from the inner ring at 0.6, 0.4, and 0.2 seconds. Capture at 0.3 seconds to confirm each ring has a different magnification, and at 0.8 seconds to confirm all rings show B.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo