AWESOME AI MOTION
효과Effects / 강조·주의Emphasis / Nº 084

스윙Swing

Swing
스윙
다른 이름Also known as · Corner Swing · 모서리 피벗 스윙 · anchor-corner-swing · Pendulum Decay · 진자 감쇠 · pendulum-decay-swing · Swing Attention · 매달린 흔들기
084
렌더 추가 예정CLIP COMING스윙Swing정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 084. 스윙 · Swing · power2.out

고정된 축에 매달린 요소가 좌우로 회전하다 진폭이 줄며 제자리로 돌아온다An element hung from a fixed pivot rotates side to side, shrinking in amplitude until it rests.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
카드가 걸려 있거나 힘을 받은 듯한 물성을 느끼게 한다. 진자의 감쇠로 자연스러운 멈춤을 만든다Gives cards a hanging, force-driven physicality. Pendulum damping produces a natural stop.
언제 쓰나Use whenUSE WHEN
  • 걸린 카드나 간판이 등장한 뒤 자연스럽게 흔들려 자리 잡을 때
  • 알림이나 변경을 흔들림으로 알릴 때
  • A hanging card or sign settles with a gentle sway after entering.
  • Signal a notification or change with a swing.
과용 주의AvoidAVOID
  • 초기 회전 10도 초과 금지
  • 표나 긴 문단 본문에는 쓰지 않는다
분류TagsTAGS
강조·주의Emphasis강조Emphasis피드백Feedback웹 UIWeb UI숏폼Short-form설명 영상Explainer video난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

좌상단 피벗의 카드가 6도에서 시작해 550ms 동안 -3.6도, 2도, 0으로 진폭이 줄며 멈춘다

과용 · 나쁜 사례OVERUSE

진폭이 15도 이상이라 카드가 천장에 걸린 광고판처럼 흔들리고, 감쇠 없이 계속 왕복해 멈추지 않는다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
초기 회전6도4~10도첫 진폭
총 길이550ms400~800ms감쇠 후 정지
피벗좌상transformOrigintop left 또는 top center
감쇠 비0.60.5~0.7다음 진폭 = 이전 x 감쇠 비
GSAP
gsap.set('.card', { transformOrigin: '0% 0%' });
tl.to('.card', { rotation: 6, duration: 0.12, ease: 'power2.out' }, 0.3)
  .to('.card', { rotation: -3.6, duration: 0.15, ease: 'power2.inOut' })
  .to('.card', { rotation: 2, duration: 0.15, ease: 'power2.inOut' })
  .to('.card', { rotation: 0, duration: 0.13, ease: 'power2.out' });
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 카드에 스윙을 넣어줘. transformOrigin은 좌상단, 6도에서 -3.6도, 2도, 0도 순으로 진폭이 줄게 하고 총 0.55초, 각 구간은 power2.inOut, 마지막은 power2.out이야. 시작은 등장 완료 직후 0.3초에 걸어줘.

Add a swing to the card in <target>. Set transformOrigin to top left and step rotation 6, -3.6, 2, 0 degrees over 0.55 seconds, each segment power2.inOut and the last power2.out. Start at 0.3 seconds right after the entrance finishes.

Codex

<파일>의 카드에 swing을 적용해. 피벗 top left, rotation 6 → -3.6 → 2 → 0, 구간 duration 0.12, 0.15, 0.15, 0.13초, ease power2.inOut(마지막 power2.out). 0.42초, 0.57초, 0.72초, 0.85초 시점을 캡처해 각도 부호가 번갈아 바뀌고 진폭이 줄어드는지 확인해.

Apply swing to the card in <file>: pivot top left, rotation 6 to -3.6 to 2 to 0, segment durations 0.12, 0.15, 0.15, 0.13s, ease power2.inOut (last power2.out). Capture at 0.42s, 0.57s, 0.72s and 0.85s and verify the angle sign alternates and the amplitude shrinks.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
transformOrigin을 set으로 미리 지정하고 감쇠 진폭을 순차 tween으로 쌓는다. paused 타임라인에서 seek해도 각도가 같다
ReelForgeBRIEF TO VIDEO
오브젝트 씬 브리프에 피벗 위치, 초기 회전, 감쇠 비, 총 길이를 파라미터로 싣는다
Scrolline DeckSCROLL SCRUB
스프링 대신 감쇠 tween 순서를 진행률 4구간으로 나눈다. scrub 중에는 2회 왕복만 남기고 ease-out을 쓴다
06

잘 맞는 조합Pairs well with

팔로스루 · Follow-through
Nº 008팔로스루Follow-throughFollow-through
셰이크 · Shake
Nº 083셰이크ShakeShake
렌더 추가 예정CLIP COMING
워블Wobble
072
Nº 072워블WobbleWobble
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo