효과Effects / UI 시연UI Demo / Nº 343

레이아웃 재배치Layout Reflow

Layout Reflow

레이아웃 재배치

다른 이름Also known as · Layout reflow · FLIP · Animated reordering · Collapsing gap exit · 빈자리 접히는 퇴장

343

도판Fig. 343. 레이아웃 재배치 · Layout Reflow · power2.inOut

재생 속도Speed

목록이나 격자의 요소가 새 위치와 크기로 부드럽게 옮겨가고 삭제된 항목의 빈자리를 메운다.Elements retain their identity as a layout changes position and size.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

요소의 동일성과 새 배열을 이해하게 한다.Preserves spatial continuity through reordering and gap closure.

언제 쓰나Use whenUSE WHEN

격자를 필터링하거나 정렬할 때
항목 삭제 후 빈자리를 메울 때

Filter or sort a grid.
Close a gap after removing an item.

과용 주의AvoidAVOID

요소 ID와 시작 및 끝 상자를 안정적으로 유지한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

같은 ID의 카드가 기존 상자에서 새 상자로 500ms 이동한다

과용 · 나쁜 사례OVERUSE

리스트를 다시 생성해 카드의 동일성이 사라진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
재배치	500ms	350~700ms	역변환 해제
삭제 퇴장	250ms	180~350ms	측정 전 완료
이징	power2.inOut	power2.inOut~power3.inOut	위치 연속성
항목 간격	24px	16~40px	최종 레이아웃 여백

GSAP

const items = gsap.utils.toArray('.reflow-item');
const first = items.map(el=>el.getBoundingClientRect());
container.classList.add('reordered');
items.forEach((el,i)=>{
  const last=el.getBoundingClientRect(), f=first[i];
  tl.fromTo(el,{x:f.left-last.left,y:f.top-last.top,scaleX:f.width/last.width,scaleY:f.height/last.height,transformOrigin:'0 0'},
    {x:0,y:0,scaleX:1,scaleY:1,duration:0.5,ease:'power2.inOut'},0);
});

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 레이아웃 재배치을 적용한다. 시작과 끝 상자를 한 번 측정하고 플러그인 없이 역변환을 500ms에 제거한다. 삭제 항목은 250ms 먼저 퇴장시킨다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Layout Reflow to <target> in <file>. Measure first and last bounds once and remove the inverse transform over 500ms using GSAP core. Exit a removed item over 250ms before measuring the remaining layout. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 레이아웃 재배치 장면에 적용한다. 시작과 끝 상자를 한 번 측정하고 플러그인 없이 역변환을 500ms에 제거한다. 삭제 항목은 250ms 먼저 퇴장시킨다. 0.12초·0.33초·0.70초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Layout Reflow in the scene for <target> in <file>. Measure first and last bounds once and remove the inverse transform over 500ms using GSAP core. Exit a removed item over 250ms before measuring the remaining layout. Capture at 0.12s, 0.33s, 0.70s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인에 레이아웃 재배치의 초기 상태와 종료 상태를 함께 기록하고 0.50초까지 seek로 재현한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 레이아웃 재배치 대상 선택자와 재배치 500ms, 삭제 퇴장 250ms, 이징 power2.inOut를 싣고 최종 상태 유지 시간을 지정한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 0.50초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.

잘 맞는 조합Pairs well with

Nº 332드래그 앤 드롭Drag and DropDrag and Drop

Nº 320아코디언 펼치기Accordion ExpansionAccordion Expansion

출처Sources

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