효과Effects / 전환·컷Transitions / Nº 157

퇴장 후 등장Exit Before Enter

Exit Before Enter

퇴장 후 등장

다른 이름Also known as · Exit before enter

157

렌더 추가 예정CLIP COMING퇴장 후 등장Exit Before Enter정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 157. 퇴장 후 등장 · Exit Before Enter · power2.out

이전 요소가 완전히 사라진 다음에야 새 요소가 나타나는 순차 교체The previous element fully disappears before the new one appears.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

상태가 순서대로 바뀐다는 분명함. 두 요소가 겹쳐 흐트러지지 않는다A clear, sequential change of state, with no overlap to muddy the read.

언제 쓰나Use whenUSE WHEN

같은 자리에서 카드, 문구, 탭 내용을 바꿀 때
두 요소가 겹치면 읽기 어려운 텍스트 교체에서

Change the content of a card, line of text, or tab in the same spot.
Replace text where overlapping elements would be hard to read.

과용 주의AvoidAVOID

퇴장이 끝나기 전에 등장을 시작하지 않는다
총 소요 0.8초 초과 금지(UI에서는 0.65초 이내)

분류TagsTAGS

전환·컷Transitions 전환Transition 순서·흐름Sequence 웹 UIWeb UI 제품 시연Product demo 설명 영상Explainer video 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이전 문구가 0.25초 동안 위로 12px 빠지며 사라지고, 완전히 사라진 뒤 새 문구가 아래에서 12px 올라오며 0.4초 동안 나타난다

과용 · 나쁜 사례OVERUSE

퇴장이 끝나기 전에 등장이 시작되어 글자가 겹치거나, 퇴장에 0.8초 넘게 걸려 답답하다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
퇴장	0.25s	0.15~0.35s	opacity와 y 이동
등장	0.4s	0.25~0.55s	퇴장보다 길게
이동 거리	12px	8~24px	방향은 일관되게
대기	0s	0~0.08s	퇴장과 등장 사이

GSAP

tl.to('.old', { opacity: 0, y: -12, duration: 0.25, ease: 'power2.in' })
  .set('.old', { display: 'none' })
  .fromTo('.new', { opacity: 0, y: 12 },
    { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<이전 요소>를 <새 요소>로 교체하는데 exit-before-enter로 해줘. 이전 요소는 0.25초 동안 opacity 0, y -12px (power2.in)로 빠지고 display none, 그 직후 새 요소가 opacity 0, y +12px에서 0.4초 동안 나타나게 해 (power2.out). 두 요소가 동시에 보이는 프레임이 없어야 하고 paused 타임라인 하나로 만들어.

Replace <oldElement> with <newElement> using exit-before-enter. The old element fades to opacity 0 and moves y -12px over 0.25 seconds (power2.in), then display none. Right after, the new element goes from opacity 0 and y +12px to rest over 0.4 seconds (power2.out). No frame should show both elements, and everything sits in one paused timeline.

Codex

<파일>의 텍스트 교체에 exit-before-enter를 적용해. .old opacity 0과 y -12px (0.25s, power2.in) 뒤 display none, .new opacity 0과 y 12px에서 원위치 (0.4s, power2.out)를 순서대로 붙인다. 0.25초 시점에 둘 다 안 보이는 프레임이 있는지, 0.2초와 0.3초에 두 요소가 동시에 보이지 않는지 캡처로 확인해.

Apply exit-before-enter to the text swap in <file>. Chain .old opacity 0 and y -12px (0.25s, power2.in) then display none, followed by .new from opacity 0 and y 12px to rest (0.4s, power2.out). Capture at 0.2 and 0.3 seconds to confirm both elements are never visible together, and check the gap frame at 0.25 seconds.