효과Effects / 도형·패스Shape & Path / Nº 433

스큐Skew

Skew

스큐

다른 이름Also known as · 기울임

433

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

도판Fig. 433. 스큐 · Skew · power2.out

축 방향으로 형태를 비스듬히 변형해 힘의 방향과 속도감을 주는 동작Slants a shape along an axis to suggest force and speed.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

기울어진 형태로 힘과 속도의 방향을 보여 준다A tilted form shows the direction of force and speed.

언제 쓰나Use whenUSE WHEN

빠르게 들어오는 타이틀·바에 속도감을 줄 때
스크롤 속도에 따라 카드가 기울었다 돌아오는 효과

When giving speed to a title or bar entering fast
When cards lean and return with scroll speed

과용 주의AvoidAVOID

skew 8도 초과 금지(글자 요소)
반드시 0도로 복귀
이동 방향과 같은 부호

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

타이틀이 skewX -4도로 150ms 기울어 들어오고 200ms에 0도로 복귀한다

과용 · 나쁜 사례OVERUSE

skew 15도 이상 지속해 글자가 찌그러지거나, 복귀 없이 기울어진 채 멈춘다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
각도	4deg	2~8deg	이동 방향과 부호를 맞춤
변형	150ms	100~250ms	기울어지는 구간
복원	200ms	150~350ms	0도로 복귀
이징	power2.out	power2~power3.out	복원이 부드럽게

GSAP

tl.from('.title', { x: -120, duration: 0.35, ease: 'power3.out' }, 0.3)
  .fromTo('.title', { skewX: -4 }, { skewX: 0, duration: 0.2, ease: 'power2.out' }, 0.45);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 타이틀에 스큐를 넣어줘. 0.3초부터 x -120px에서 0.35초 power3.out으로 들어오고, 0.45초에 skewX -4도에서 0도로 0.2초 power2.out으로 복귀시켜. 종료는 반드시 skew 0. paused 타임라인에 넣어.

Add a skew to the <target> title with GSAP. From 0.3s enter from x -120px over 0.35s with power3.out, and at 0.45s return skewX from -4 to 0 degrees over 0.2s with power2.out. It must end at skew 0. Paused timeline.

Codex

<파일>의 <대상>에 skew를 적용해. from x -120(0.35s, power3.out, position 0.3)과 fromTo skewX -4→0(0.2s, power2.out, position 0.45). 0.35초·0.5초·1.0초를 캡처해 기울기 부호가 이동 방향과 맞는지, 1.0초에 skew 0인지 확인해.

Apply skew to <target> in <file>. from x -120 (0.35s, power3.out, position 0.3) plus fromTo skewX -4 to 0 (0.2s, power2.out, position 0.45). Capture at 0.35s, 0.5s and 1.0s to check the tilt sign matches the direction of travel and skew is 0 at 1.0s.