Skip to content
Docs
훅으로 돌아가기

useLayoutMotion

@hua-labs/hua/framework
Pro
출시 예정

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

FLIP 기법 기반 레이아웃 전환 애니메이션 (Pro)

설치

bash
npm install @hua-labs/hua
Import
tsx
import { useLayoutMotion } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx
import { useLayoutMotion } from "@hua-labs/hua/framework";

const layout = useLayoutMotion({
  duration: 300,
  easing: 'ease-out',
});

return (
  <div ref={layout.containerRef}>
    {items.map((item) => (
      <div
        key={item.id}
        ref={(el) => layout.registerItem(item.id, el)}
        style={layout.getItemStyle(item.id)}
      >
        {item.content}
      </div>
    ))}
  </div>
);

라이브 데모

레이아웃 전환 데모

1
2
3
4
5
6
현재 레이아웃:
grid

API 레퍼런스

옵션

이름타입기본값설명
durationnumber300레이아웃 전환 애니메이션 지속 시간 (밀리초)
easingstring"ease-out"애니메이션 이징 함수
staggernumber0아이템 간 스태거 딜레이 (밀리초)
onLayoutChange() => void-레이아웃 변경 시 호출되는 콜백

반환값

이름타입설명
containerRefRefObject<HTMLElement>레이아웃 컨테이너 ref
registerItem(id, el) => void아이템 ref 등록 함수
getItemStyle(id) => CSSProperties아이템별 스타일 반환 함수
isAnimatingboolean애니메이션 진행 중 여부
captureSnapshot() => void현재 레이아웃 스냅샷 캡처
playAnimation() => voidFLIP 애니메이션 실행
mountedboolean클라이언트 마운트 여부

FLIP 기법

tsx
// FLIP = First, Last, Invert, Play
// 1. First: 초기 위치 기록
// 2. Last: 최종 위치 계산
// 3. Invert: 차이를 transform으로 적용
// 4. Play: transform을 0으로 애니메이션

// useLayoutMotion이 자동으로 처리:
const layout = useLayoutMotion();

// 레이아웃 변경 시 자동으로 부드러운 애니메이션
setItems(shuffledItems); // 자동 FLIP 애니메이션

사용 사례

뷰 모드 전환

그리드/리스트 뷰 전환 애니메이션

드래그 앤 드롭

요소 재배치 FLIP 애니메이션

필터링

필터 변경 시 아이템 재정렬 애니메이션

동적 리스트

아이템 추가/제거 레이아웃 애니메이션