무한 캔버스 팬Infinite Canvas Pan

Infinite Canvas Pan

무한 캔버스 팬

다른 이름Also known as · 무한 지면 팬 · Long canvas pan

233

도판Fig. 233. 무한 캔버스 팬 · Infinite Canvas Pan · sine.inOut

재생 속도Speed

여섯 도판이 이어진 긴 지면을 가로 5400px 이동해 마지막 초점에 멈춘다A continuous 5,400px camera pan across six editorial plates settles on a scarlet focus.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

정보가 한 지면 위에서 이어지고 있다는 연속성과 넓은 범위Continuity and breadth across a single connected canvas.

언제 쓰나Use whenUSE WHEN

여러 단계나 수치를 한 지면의 흐름으로 보여줄 때
넓은 지도나 편집 지면을 따라 시선을 이동할 때

Connect several steps or statistics across one editorial canvas.
Guide attention across a wide map or composition.

과용 주의AvoidAVOID

도판 사이에 화면 전체가 비는 간격을 두지 않는다
중간 도판마다 멈추지 않는다

분류TagsTAGS

가상 카메라Camera 주목 끌기Attention 순서·흐름Sequence 전환Transition 설명 영상Explainer video 숏폼Short-form 스크롤덱Scroll deck 발표Presentation 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

6개 도판을 1080px 간격으로 놓고 4.3초 동안 5400px 팬한 뒤 마지막 주홍 원에 0.5초 정지한다

과용 · 나쁜 사례OVERUSE

도판마다 별도 컷을 넣거나 이동 거리가 짧아 일반 슬라이드처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
월드 이동	−5400px	4000~6500px	6개 도판의 마지막 위치에 정렬
도판 간격	1080px	960~1168px	인접 도판이 자연스럽게 연결
이동 시간	4.3s	3.5~4.5s	5초 중 마지막 0.5초 홀드
이징	sine.inOut	sine.inOut	한 번의 긴 이동

GSAP

const tl = Motion.timeline();
tl.to('#world', {x:-5400, duration:4.3, ease:'sine.inOut'}, .2);
Motion.ready();

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 6개 도판을 1080px 간격으로 배치하고 월드 래퍼를 x 0에서 −5400px로 0.2초부터 4.3초간 sine.inOut 이동한다. 전체 5초이며 마지막 0.5초는 정지한다. 종이·먹·주홍 한 점과 큰 숫자·세리프 문장을 사용하고 타이머 없이 한 GSAP 타임라인으로 구현한다.

Apply this effect to <대상>. Place six editorial plates 1,080px apart. Move the world wrapper from x 0 to −5,400px over 4.3 seconds with sine.inOut, starting at 0.2 seconds, then hold until 5 seconds. Use paper, ink, a single scarlet focus, large numerals and serif text in one seekable GSAP timeline.

Codex

<파일>에 6개 도판을 1080px 간격으로 배치하고 월드 래퍼를 x 0에서 −5400px로 0.2초부터 4.3초간 sine.inOut 이동한다. 전체 5초이며 마지막 0.5초는 정지한다. 0.4초·2.1초·3.7초·4.8초를 캡처해 서로 다른 도판이 이어지고 마지막 주홍 원이 온전히 보이는지 확인한다.

Implement in <파일>. Place six editorial plates 1,080px apart. Move the world wrapper from x 0 to −5,400px over 4.3 seconds with sine.inOut, starting at 0.2 seconds, then hold until 5 seconds. Capture 0.4, 2.1, 3.7 and 4.8 seconds to verify continuous travel and an intact final scarlet focus.