스케일Scale

Scale

스케일

다른 이름Also known as · Scale / Zoom · 크기 변화 · ScaleX / ScaleY · 축별 크기

023

렌더 추가 예정CLIP COMING스케일Scale정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 023. 스케일 · Scale · power3.out

기준점에서 크기를 비례로 바꿔 펼쳐지는 방향과 크기 변화를 보여 주는 기본 동작Changes size proportionally from an anchor so growth direction and amount read clearly.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

크기가 커지거나 작아지는 변화와 어디서 펼쳐지는지를 함께 알린다Size change and where it unfolds from are told together.

언제 쓰나Use whenUSE WHEN

카드·모달이 살짝 커지며 나타날 때
버튼을 눌렀을 때 미세하게 줄었다 돌아올 때
가로나 세로 한 축으로만 늘어나는 막대·바를 그릴 때

When a card or modal grows slightly as it appears
When a button dips and returns on press
When drawing bars that grow along one axis

과용 주의AvoidAVOID

scale 0.9 미만 시작은 글자 요소에 금지
transform-origin을 의도에 맞게 지정
opacity와 같이 써서 튐 방지

분류TagsTAGS

기본기Principles 강조Emphasis 전환Transition 웹 UIWeb UI 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

모달이 scale 0.96에서 1로 300ms 동안 커지며 중앙에서 펼쳐진다

과용 · 나쁜 사례OVERUSE

scale 0에서 시작해 글자가 깨져 보이거나 원점이 요소 밖이라 엉뚱한 방향으로 커진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시작 배율	0.96	0.9~0.98	1에 가까울수록 고급스럽다
길이	300ms	200~450ms	이동 시간
원점	50% 50%	방향에 따라 지정	막대는 50% 100%
이징	power3.out	power2~power4.out	도착이 부드럽게

GSAP

tl.from('.modal', { scale: 0.96, opacity: 0, transformOrigin: '50% 50%', duration: 0.3, ease: 'power3.out' }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>에 스케일 등장을 넣어줘. 0.3초에 scale 0.96, opacity 0에서 시작해 0.3초 동안 scale 1, opacity 1로 power3.out으로 커져. transformOrigin은 50% 50%, 막대라면 50% 100%. 종료 scale은 정확히 1로 두고 paused 타임라인에 넣어.

Add a scale entrance to <target> with GSAP. At 0.3s start at scale 0.96, opacity 0 and grow to scale 1, opacity 1 over 0.3s with power3.out. transformOrigin 50% 50%, or 50% 100% for bars. End scale exactly 1 and use a paused timeline.

Codex

<파일>의 <대상>에 scale을 적용해. from({scale 0.96, opacity 0, transformOrigin '50% 50%'}, 0.3s, power3.out, position 0.3). 0.3초·0.45초·0.8초를 캡처해 시작 배율 0.96, 중간, 종료 1.0과 글자 선명도를 확인해.

Apply scale to <target> in <file>. from({scale 0.96, opacity 0, transformOrigin '50% 50%'}, 0.3s, power3.out, position 0.3). Capture at 0.3s, 0.45s and 0.8s to check start scale 0.96, the midpoint, end scale 1.0 and text sharpness.