충돌 밀어내기Collision Displacement
들어오는 요소가 기존 요소에 닿는 순간 그 요소를 같은 방향으로 밀어내는 움직임An incoming element hits an existing one and pushes it along with the same force.
무엇을 전하나What it tells
- 새 뉴스 티커가 기존 문구를 밀어낼 때
- 카드 하나가 들어오며 옆 카드를 자리에서 밀 때
- 새 항목이 목록에 끼어드는 순간을 설명할 때
- A new ticker headline pushing out the old line.
- One card entering and shoving its neighbor aside.
- Explaining a new item being inserted into a list.
- 접촉 시점 이전에는 상대가 움직이면 안 된다
- 밀림 거리는 들어오는 요소 폭의 절반 이내로 한다
- back.out 값 2 초과는 과하게 튄다
좋은 예와 나쁜 예Good and bad use
새 카드가 900ms 동안 들어오다 40% 지점에서 기존 카드에 닿고, 기존 카드가 80px 밀려나며 살짝 튕겨 자리를 잡는다
접촉 전에 상대가 미리 움직이거나, 밀림 거리가 커서 카드가 화면 밖으로 사라진다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 시간 | 0.9s | 0.6~1.3s | 진입과 밀림 합산 |
| 접촉 시점 | 40% | 30~55% | 진입 진행률 기준 |
| 밀림 거리 | 80px | 40~140px | 상대 요소 x |
| 이징 | back.out(1.5) | back.out(1)~(2) | 밀린 뒤 살짝 되돌림 |
const hit = 0.9 * 0.4; // 접촉 시각 0.36s
tl.fromTo('.incoming', { x: -700 }, { x: 0, duration: 0.9, ease: 'power2.in' }, 0);
tl.to('.target', { x: 80, duration: 0.5, ease: 'back.out(1.5)' }, hit);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP 타임라인으로 <대상>이 왼쪽에서 들어와 기존 요소 <대상2>를 밀어내게 해줘. 진입은 0.9초 power2.in으로 x -700에서 0까지, 접촉은 진입의 40%인 0.36초 시점. 그 시점부터 대상2가 x 80px 밀려나고 0.5초 back.out(1.5)로 자리를 잡게 해. 접촉 전에는 대상2가 움직이지 않고 paused 타임라인 하나로 작성해.
Use a GSAP timeline so <target> slides in from the left and pushes <target2>. Entry takes 0.9 seconds with power2.in from x -700 to 0; contact happens at 40% of it, 0.36 seconds. From then target2 moves 80px over 0.5 seconds with back.out(1.5). Target2 must not move before contact. One paused timeline.
<파일>에 collision-displacement를 적용해. 접촉 시각 hit=0.36을 상수로 두고 .incoming은 position 0, duration 0.9, ease power2.in, .target은 position hit, x 80, duration 0.5, ease back.out(1.5). 0.30초에는 .target이 x 0인지, 0.45초에는 밀리는 중인지, 1.6초에는 x 80에 안착했는지 캡처로 확인해.
Apply collision-displacement in <file>. Keep contact time hit=0.36 as a constant; .incoming at position 0, duration 0.9, ease power2.in; .target at position hit, x 80, duration 0.5, ease back.out(1.5). Capture 0.30s (target still at x 0), 0.45s (being pushed) and 1.6s (settled at x 80).
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/rules/reactive-displacement.md)unknown - local/HyperFrames-skills (
claude-skill:hyperframes-animation/blueprints/ticker-takeover.md)unknown