스플릿 슬라이드Split Slide

Split Slide

스플릿 슬라이드

다른 이름Also known as · Split slide · 반쪽 슬라이드

143

도판Fig. 143. 스플릿 슬라이드 · Split Slide · power3.inOut

재생 속도Speed

두 반쪽 장면이 서로 반대쪽으로 벌어지거나 모여 다음 장면과 교체된다Two halves of the frame slide apart or together in opposite directions and swap scenes.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

화면이 문처럼 반으로 열리거나 닫힌다. 좌우 대칭의 정돈된 교체를 만든다Gives openings and closings a clear, symmetric rhythm.

언제 쓰나Use whenUSE WHEN

오프닝이나 섹션 시작에서 문이 열리듯 새 화면을 보여 줄 때
좌우 대칭 레이아웃의 화면을 정돈된 느낌으로 교체할 때

When opening a new screen like doors at a section start
When swapping a symmetric layout with a tidy, orderly feel

과용 주의AvoidAVOID

좌우 이동량은 같게 둔다(비대칭이면 의도 없는 흔들림)
틈 뒤에는 반드시 다음 장면을 미리 깔아 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이전 장면이 가운데에서 갈라져 좌우로 각각 화면 폭의 50%씩 0.65초 동안 밀려 나가고, 아래에서 새 장면이 드러난다

과용 · 나쁜 사례OVERUSE

양쪽 속도가 달라 중심선이 어긋나거나, 갈라진 틈에 검은 배경이 비친다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	650ms	500~900ms	easeInOutCubic
이동량	각 960px	각 960px	1920px 폭의 절반
방향	가로(수평 분할)	가로 또는 세로	내용 흐름과 맞춘다
모드	Out(열림)	In / Out / InOut	In은 닫힘, Out은 열림
시차	0ms	0~60ms	양쪽 동시가 기본

GSAP

tl.to('.half-l', { x: -960, duration: 0.65, ease: 'power3.inOut' }, 0);
tl.to('.half-r', { x: 960, duration: 0.65, ease: 'power3.inOut' }, 0);
// 아래에는 .next가 이미 있고, 끝난 뒤 반쪽은 hidden

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면을 좌우로 갈라 여는 스플릿 슬라이드 전환을 넣어줘. 이전 장면을 반쪽 두 개로 복제해 왼쪽은 x -960, 오른쪽은 x +960으로 0.65초 동안 power3.inOut으로 밀고, 아래에는 다음 장면이 미리 깔려 있게 해. 양쪽 트윈은 같은 시작 시각, 끝난 뒤 반쪽은 숨겨. 타임라인 하나로 seek 가능하게.

Add a Split Slide transition to <target>. Duplicate the previous scene into two halves; slide the left half to x -960 and the right half to x +960 over 0.65s with power3.inOut, starting at the same position. The next scene must already sit underneath. Hide the halves when done. One seekable GSAP timeline.

Codex

<파일>의 전환부에 스플릿 슬라이드를 구현해. .half-l x -960, .half-r x 960, duration 0.65, ease power3.inOut, 같은 position 0. 0.15초, 0.35초, 0.65초 시점을 캡처해 중심 틈이 좌우 대칭으로 벌어지는지, 틈 뒤에 다음 장면이 보이는지 확인해.

Implement Split Slide in <file>. .half-l x -960, .half-r x 960, duration 0.65, ease power3.inOut, both at position 0. Capture at 0.15s, 0.35s, and 0.65s to confirm the center gap opens symmetrically and that the next scene is visible through it.