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

스케일 팝Scale Pop

Scale Pop

스케일 팝

다른 이름Also known as · Scale pop entrance · 스케일 팝 등장 · spring-pop-entrance · overlay-pop · Scale In and Out · 스케일 등장과 퇴장 · Zoom Reveal · Grow Reveal · Grow from anchor · 앵커에서 자라기 · GrowFromPoint · GrowFromCenter · GrowFromEdge · ShrinkToCenter

053

도판Fig. 053. 스케일 팝 · Scale Pop · power3.out

재생 속도Speed

요소가 작은 크기에서 제 크기로 커져 멈춘다. 반대로 축소되어 사라질 수 있다.An element grows from a small scale to its final size.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

새 요소의 도착을 분명하게 알린다.Clearly marks the arrival of a new element.

언제 쓰나Use whenUSE WHEN

새 배지나 숫자를 등장시킬 때
작은 팝업의 도착을 알릴 때

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

과용 주의AvoidAVOID

긴 본문 전체를 0에서 확대해 읽기를 방해한다.
완료 자세에서 내용이 가려지지 않게 한다.

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

완료 배지가 0.5초 동안 중심에서 커진다.

과용 · 나쁜 사례OVERUSE

긴 본문 전체를 0에서 확대해 읽기를 방해한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	0.5s	0.35~0.7s	0초부터 시작하는 공개 구간
시작 크기	0	0~0.85	중심에서 성장
앵커	50% 50%	중앙 또는 가장자리	성장 방향 기준
이징	power3.out	power2.out, power3.out, sine.inOut	움직임의 가속과 감속

GSAP

gsap.set('.target', {transformOrigin:'50% 50%'});
tl.fromTo('.target', {scale:0}, {scale:1, duration:0.5, ease:'power3.out'}, 0);
tl.set('.target', {scale:1}, 0.5);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 스케일 팝을 적용해. 0.5초, 시작 크기 0; 앵커 50% 50%, 이징 power3.out로 구현해. paused 타임라인으로 seek 가능하게 하고 완료 자세를 유지해.

Apply Scale Pop to <target> in <file>. Use a 0.5s segment with power3.out; implement these explicit settings: Initial scale: 0, Transform origin: 50% 50%. Use a paused, seekable timeline and hold the final pose.

Codex

<파일>의 <대상> 레이어에 스케일 팝을 적용해. 0.5초, 시작 크기 0; 앵커 50% 50%, power3.out를 사용하고 0초, 0.25초, 0.5초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Scale Pop to the <target> layer in <file> with Initial scale: 0, Transform origin: 50% 50%, using the supplied core snippet and a 0.5s segment with power3.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.