스퀴즈 전환Squeeze Transition
앞 장면의 한 축이 눌려 사라지고 다음 장면이 같은 축으로 펼쳐지는 전환The outgoing scene is squashed along one axis while the next scene unfolds from the same edge.
무엇을 전하나What it tells
- 화면 상태가 좌우 혹은 상하로 크게 바뀌는 순간을 강조할 때
- 카드나 패널을 다른 콘텐츠로 교체할 때
- Emphasize a big left-right or up-down state change.
- Swap one card or panel for different content.
- 글자가 많은 장면은 scale이 아니라 clipPath로 바꾼다(글자 왜곡 방지)
- 눌림 정점에서 빈 화면이 0.05초 넘게 남지 않게 한다
좋은 예와 나쁜 예Good and bad use
앞 장면이 0.3초 동안 scaleX 1에서 0으로 눌려 왼쪽 가장자리로 접히고, 뒤 장면이 같은 가장자리에서 0.35초 동안 펼쳐진다
두 장면이 동시에 눌려 화면이 비는 구간이 길거나, 글자가 늘어나 찌그러지는 채로 보인다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 지속 | 0.65s | 0.45~0.9s | 퇴장과 등장이 절반씩 |
| 축 | X | X/Y/중앙 | 원점은 맞닿는 가장자리 |
| 최소 scale | 0 | 0~0.02 | 0으로 하면 1프레임 정지 |
| 이징 | power2.inOut | power2~3 | 퇴장은 in, 등장은 out |
tl.set('.b', { scaleX: 0, transformOrigin: '0% 50%' })
.to('.a', { scaleX: 0, transformOrigin: '0% 50%', duration: 0.3, ease: 'power2.in' })
.to('.b', { scaleX: 1, duration: 0.35, ease: 'power2.out' }, 0.3);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상A>에서 <대상B>로 스퀴즈 전환을 만들어줘. A는 transformOrigin을 0% 50%로 두고 0.3초 동안 scaleX 1에서 0으로 power2.in, B는 같은 원점에서 scaleX 0에서 1로 0.35초 power2.out으로 펼쳐지게 해. 전체 타임라인은 paused 하나로 만들어.
Build a squeeze transition from <targetA> to <targetB>. Set transformOrigin to 0% 50%. A goes scaleX 1 to 0 over 0.3 seconds with power2.in, then B goes scaleX 0 to 1 over 0.35 seconds with power2.out from the same origin. Use one paused timeline.
<파일>에 squeeze 전환을 넣어. 앞 요소 scaleX 1에서 0 (0.3s, power2.in), 뒤 요소 scaleX 0에서 1 (0.3초 시점부터 0.35s, power2.out), 둘 다 transformOrigin 0% 50%. 0.3초에 앞 요소가 보이지 않는지, 0.65초에 뒤 요소가 원래 크기인지 캡처로 확인하고 글자 왜곡 여부도 봐.
Add a squeeze transition in <file>. Outgoing element scaleX 1 to 0 (0.3s, power2.in), incoming element scaleX 0 to 1 (starting at 0.3s, 0.35s, power2.out), both with transformOrigin 0% 50%. Capture at 0.3 seconds to confirm the outgoing element is gone, at 0.65 seconds to confirm the incoming one is full size, and check text for distortion.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- gl-transitions/gl-transitionsMIT
- FFmpeg/FFmpegLGPL-2.1-or-later
- mifi/editlyMIT
- gl-transitions/gl-transitionsMIT
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/transitions/css-push.md)unknown