useCardList

@hua-labs/hua/motion

카드 리스트 스태거 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const cards = useCardList({
  staggerDelay: 100,
  duration: 400,
  gridColumns: 3,
});

return (
  <div ref={cards.ref} style={cards.style}>
    {items.map((item, index) => (
      <div
        key={item.id}
        data-card
        style={cards.cardStyles[index]}
        className="p-4 border rounded-lg"
      >
        {item.title}
      </div>
    ))}
  </div>
);

docs:hooks.use-card-list.examples.customGridLayout

tsx

const grid = useCardList({
  staggerDelay: 80,
  duration: 500,
  initialTranslateY: 40,
  initialOpacity: 0,
  initialScale: 0.9,
  gridColumns: 4,
  gridGap: 16,
});

return (
  <div ref={grid.ref} style={grid.style}>
    {products.map((product, i) => (
      <ProductCard
        key={product.id}
        data-card
        style={grid.cardStyles[i]}
        product={product}
      />
    ))}
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	500	docs:hooks.use-card-list.options.duration
easing	string	"ease-out"	docs:hooks.use-card-list.options.easing
staggerDelay	number	100	docs:hooks.use-card-list.options.staggerDelay
initialOpacity	number	0	docs:hooks.use-card-list.options.initialOpacity
initialScale	number	0.8	docs:hooks.use-card-list.options.initialScale
initialTranslateY	number	30	docs:hooks.use-card-list.options.initialTranslateY
gridColumns	number	3	docs:hooks.use-card-list.options.gridColumns
gridGap	number	20	docs:hooks.use-card-list.options.gridGap

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-card-list.returns.ref
style	CSSProperties	docs:hooks.use-card-list.returns.style
cardStyles	CSSProperties[]	docs:hooks.use-card-list.returns.cardStyles
isVisible	boolean	docs:hooks.use-card-list.returns.isVisible
isAnimating	boolean	docs:hooks.use-card-list.returns.isAnimating
progress	number	docs:hooks.use-card-list.returns.progress
staggerDelay	number	docs:hooks.use-card-list.returns.staggerDelay
gridColumns	number	docs:hooks.use-card-list.returns.gridColumns
gridGap	number	docs:hooks.use-card-list.returns.gridGap
start	() => void	docs:hooks.use-card-list.returns.start
stop	() => void	docs:hooks.use-card-list.returns.stop
reset	() => void	docs:hooks.use-card-list.returns.reset

사용 사례

카드 리스트

카드 그리드 스태거 애니메이션

상품 그리드

상품 목록 순차 등장

기능 카드

기능 소개 카드 애니메이션

랜딩 페이지 섹션

스크롤 시 섹션별 등장 애니메이션

useUnifiedMotion useStagger