푸시 전환Push

Push

푸시 전환

다른 이름Also known as · 밀어내기 전환 · Push transition · 밀기 전환 · Push Transition · slideTransition · slide() · Push scene transition · 밀어내는 장면 전환

121

도판Fig. 121. 푸시 전환 · Push · power2.inOut

재생 속도Speed

새 장면이 들어오는 만큼 기존 장면을 같은 방향으로 밀어내는 전환An incoming scene pushes the existing scene out by the same amount in the same direction.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

두 장면이 연결된 공간처럼 이어진다Makes two scenes feel like adjoining spaces.

언제 쓰나Use whenUSE WHEN

순서가 있는 단계 사이를 이동할 때
옆에 놓인 장면으로 넘어가는 공간 관계를 보여줄 때

Move between ordered steps.
Show the spatial relationship when moving to an adjacent scene.

과용 주의AvoidAVOID

장면마다 다른 이징을 쓰지 않는다
이동 거리가 달라 틈이 생기지 않도록 한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

B가 오른쪽에서 들어오는 동안 A가 같은 속도로 왼쪽으로 나간다

과용 · 나쁜 사례OVERUSE

A는 멈춰 있는데 B만 덮어서 푸시가 슬라이드 오버레이처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전환 시작	0.35s	0.3~0.8s	준비 상태 유지
전환 지속	1.2s	0.7~1.5s	두 장면 이동 확인
이동 거리	−1168px	장면 폭 1배	두 장면을 붙인 레일의 이동
이징	power2.inOut	power1~power3.inOut	같은 부모에서 가속과 감속 공유

GSAP

const tl = Motion.timeline();
tl.to('#rail', {x:-1168, duration:1.2, ease:'power2.inOut'}, 0.35);
tl.to('.lead', {opacity:1, duration:0.2}, 1.7);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 장면 A와 B를 폭 1168px씩 하나의 레일에 나란히 붙여 푸시 전환을 만들어줘. B를 x 1168px에 놓고 부모 레일만 0.35초부터 1.2초 동안 x −1168px로 power2.inOut 이동해. 1.9초부터 3초까지 완성 장면을 정지해.

Create a push transition for <target> by placing scenes A and B side by side on one rail, each 1168px wide. Place B at x 1168px and animate only the parent rail to x -1168px starting at 0.35 seconds over 1.2 seconds with power2.inOut. Hold the completed scene from 1.9 to 3 seconds.

Codex

<파일>의 장면 전환을 공통 레일 기반 푸시로 바꿔. 폭 1168px 장면 두 개를 좌우로 붙이고 레일 x를 0.35초부터 1.2초 동안 −1168px로 power2.inOut 이동해. 0.23초, 0.73초, 1.23초, 2.9초를 캡처해 A와 B가 틈 없이 같이 움직이고 마지막에 B만 남는지 확인해.

Change the scene transition in <file> to a push using a shared rail. Place two 1168px-wide scenes side by side and animate the rail x to -1168px starting at 0.35 seconds over 1.2 seconds with power2.inOut. Capture at 0.23, 0.73, 1.23, and 2.9 seconds to verify that A and B move together without gaps and only B remains at the end.