효과Effects / 등장·퇴장Entrance & Exit / Nº 038

페이드 슬라이드Fade Slide

Fade Slide

페이드 슬라이드

다른 이름Also known as · Fade Up · Fade Through Translation · Fade and slide entrance · 페이드 슬라이드 등장 · Alpha Cutout · 알파 컷아웃 리빌 · alpha-matte-cutout

038

도판Fig. 038. 페이드 슬라이드 · Fade Slide · power2.out

재생 속도Speed

요소가 가장자리나 조금 낮은 위치에서 이동하며 선명하게 나타난다.An element fades in while sliding into position.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

새 항목의 위치와 등장 순서를 읽는다.Makes the location and arrival order of new content clear.

언제 쓰나Use whenUSE WHEN

새 목록 항목을 보여줄 때
제목과 설명을 순차 등장시킬 때

Use when presenting fade slide in a content reveal scene.
Use for a focused title, image, or card with a clearly visible final state.

과용 주의AvoidAVOID

본문마다 큰 이동을 걸어 읽는 위치가 흔들린다.
완료 자세에서 내용이 가려지지 않게 한다.

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 전환Transition 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

설명 카드가 아래 24px에서 올라오며 선명해진다.

과용 · 나쁜 사례OVERUSE

본문마다 큰 이동을 걸어 읽는 위치가 흔들린다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	0.5s	0.35~0.7s	0초부터 시작하는 공개 구간
이동 거리	24px	12~48px	기준 위치 아래에서 시작
시작 불투명도	0	0~0.2	완료 시 1
이징	power2.out	power2.out, power3.out, sine.inOut	움직임의 가속과 감속

GSAP

gsap.set('.target', {y:24, opacity:0});
tl.to('.target', {y:0, opacity:1, duration:0.5, ease:'power2.out'}, 0);
tl.set('.target', {y:0, opacity:1}, 0.5);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 페이드 슬라이드을 적용해. 0.5초, 이동 거리 24px; 시작 불투명도 0, 이징 power2.out로 구현해. paused 타임라인으로 seek 가능하게 하고 완료 자세를 유지해.

Apply Fade Slide to <target> in <file>. Use a 0.5s segment with power2.out; implement these explicit settings: Vertical travel: 24px, Initial opacity: 0. Use a paused, seekable timeline and hold the final pose.

Codex

<파일>의 <대상> 레이어에 페이드 슬라이드을 적용해. 0.5초, 이동 거리 24px; 시작 불투명도 0, power2.out를 사용하고 0초, 0.25초, 0.5초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Fade Slide to the <target> layer in <file> with Vertical travel: 24px, Initial opacity: 0, using the supplied core snippet and a 0.5s segment with power2.out. Capture at 0s, 0.25s, and 0.5s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.