플라이 투Fly-to

Fly-to

플라이 투

다른 이름Also known as · Geographic fly-to · 지도 비행 이동

230

렌더 추가 예정CLIP COMING플라이 투Fly-to정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 230. 플라이 투 · Fly-to · power1.inOut

시점이 출발 지역에서 줌아웃하고 넓어진 시야로 이동한 뒤 목표 지역에 다시 줌인한다.Zoom out from one place, travel across the wider view, then zoom into the destination.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

멀리 떨어진 장소의 거리와 위치 관계를 유지하며 시선을 옮긴다.Preserves the relationship between distant locations.

언제 쓰나Use whenUSE WHEN

멀리 떨어진 두 장소를 연결할 때
지역 목록을 차례로 방문할 때

Connect two distant places.
Visit a list of regions in sequence.

과용 주의AvoidAVOID

목적지 라벨은 도착 뒤 400ms 유지한다.

분류TagsTAGS

가상 카메라Camera 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 제품 시연Product demo 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

출발지에서 0.5배 줌아웃하고 이동한 뒤 목적지에 줌인한다.

과용 · 나쁜 사례OVERUSE

동일 배율로 빠르게 이동해 출발지와 목적지 관계가 사라진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 지속	1800ms	1200~2600ms	홀드 제외
중간 배율	0.5	0.35~0.7	시작 배율 대비
양 끝 홀드	400ms	200~800ms	출발과 목적지 읽기
이징	power1.inOut	power1.inOut~power2.inOut	구간 경계에서 감속

GSAP

const tl = gsap.timeline({paused:true});
gsap.set('.map', {x:0, y:0, scale:1, transformOrigin:'50% 50%'});
tl.to({}, {duration:0.4});
tl.to('.map', {scale:0.5, duration:0.6, ease:'power1.inOut'});
tl.to('.map', {x:-480, y:180, duration:0.6, ease:'power1.inOut'});
tl.to('.map', {scale:1, duration:0.6, ease:'power1.inOut'});
tl.to({}, {duration:0.4});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 플라이 투를 적용해. SVG 지도 그룹의 중심과 배율을 줌아웃, 이동, 줌인의 연속 경로로 계산해 함께 보간한다. 이동 지속 1800ms; 중간 배율 0.5; 양 끝 홀드 400ms; 이징 power1.inOut. 이징은 power1.inOut로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Fly-to to <target> in <file>. Hold 400ms, zoom to 0.5 scale for 600ms, travel for 600ms, zoom back for 600ms, and hold 400ms at the destination. Use power1.inOut and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 플라이 투를 적용해. SVG 지도 그룹의 중심과 배율을 줌아웃, 이동, 줌인의 연속 경로로 계산해 함께 보간한다. 이동 지속 1800ms; 중간 배율 0.5; 양 끝 홀드 400ms; 이징 power1.inOut. 이징은 power1.inOut를 사용해. 0초·0.9초·1.8초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Fly-to to the target scene in <file>. Hold 400ms, zoom to 0.5 scale for 600ms, travel for 600ms, zoom back for 600ms, and hold 400ms at the destination. Use power1.inOut. Capture at 0, 0.9, and 1.8 seconds to verify the initial state, the defining intermediate change, and the final state. Seek backward to the same times and compare the images.