스케일 스왑Scale Swap
기존 장면이 기준점으로 줄어드는 동안 새 장면이 커져 그 자리를 잇는 전환The old element shrinks toward a pivot while the new one grows in to take its place.
무엇을 전하나What it tells
- 아이콘, 카드, 버튼 같은 요소가 다른 상태로 바뀔 때
- 한 장면이 다른 장면으로 같은 위치에서 교체될 때
- Change an icon, card, or button into another state.
- Swap one scene for another in the same position.
- scale 0까지 줄이지 않는다(0.2 아래 금지)
- 오버슈트를 쓰려면 scale 1.05 이하로 제한한다
좋은 예와 나쁜 예Good and bad use
앞 요소가 0.55초 동안 scale 1에서 0.2로 줄며 사라지고, 뒤 요소가 0.2에서 1로 커지며 50% 시점에 교차한다
앞 요소가 0으로 완전히 줄어 빈 구간이 생기거나, 오버슈트를 1.3배 넘게 줘서 통통 튀는 느낌이 과하다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 지속 | 0.55s | 0.35~0.8s | 교차는 50% |
| 원점 | 50% 50% | 요소 중심 또는 클릭점 | 두 요소 동일 |
| 앞 scale | 1→0.2 | 0.1~0.5 | opacity 1→0 동반 |
| 뒤 scale | 0.2→1 | 0.2~0.6에서 시작 | opacity 0→1 동반 |
tl.to('.a', { scale: 0.2, opacity: 0, duration: 0.55, ease: 'power2.in', transformOrigin: '50% 50%' }, 0)
.fromTo('.b', { scale: 0.2, opacity: 0, transformOrigin: '50% 50%' },
{ scale: 1, opacity: 1, duration: 0.55, ease: 'back.out(1.4)' }, 0.275);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상A>를 <대상B>로 스케일 스왑해줘. 둘은 같은 위치에 겹쳐 두고 transformOrigin 50% 50%. A는 0.55초 동안 scale 1에서 0.2, opacity 1에서 0 (power2.in), B는 0.275초부터 0.55초 동안 scale 0.2에서 1, opacity 0에서 1 (back.out(1.4)). paused 타임라인으로 만들어.
Scale-swap <targetA> for <targetB>. Stack them in the same spot with transformOrigin 50% 50%. A goes scale 1 to 0.2 and opacity 1 to 0 over 0.55 seconds (power2.in). B starts at 0.275 seconds and goes scale 0.2 to 1 and opacity 0 to 1 over 0.55 seconds (back.out(1.4)). Use one paused timeline.
<파일>의 상태 교체에 scale swap을 적용해. 앞 요소 scale 1에서 0.2와 opacity 0 (0.55s, power2.in), 뒤 요소 scale 0.2에서 1과 opacity 1 (0.275초 시점부터 0.55s, back.out(1.4)). 0.3초에 두 요소가 함께 보이는지, 0.83초에 뒤 요소가 scale 1인지 캡처로 확인해.
Apply a scale swap to the state change in <file>. Outgoing element scale 1 to 0.2 with opacity to 0 (0.55s, power2.in); incoming element scale 0.2 to 1 with opacity to 1 (starts at 0.275s, 0.55s, back.out(1.4)). Capture at 0.3 seconds to confirm both are visible together, and at 0.83 seconds to confirm the incoming element is at scale 1.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- heygen-com/hyperframesApache-2.0
- gl-transitions/gl-transitionsMIT
- mifi/editlyMIT
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/rules/scale-swap-transition.md)unknown