useSimplePageMotion

@hua-labs/hua/motion

간단한 페이지 전환 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const motions = useSimplePageMotion("home");

return (
  <div>
    <h1 ref={motions.hero?.ref} style={motions.hero?.style}>
      Welcome
    </h1>
    <p ref={motions.title?.ref} style={motions.title?.style}>
      Description
    </p>
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
pageType*	"home" \| "dashboard" \| "product" \| "blog"	-	docs:hooks.use-simple-page-motion.options.pageType

반환값

이름	타입	설명
[elementId]	MotionRef	docs:hooks.use-simple-page-motion.returns.elementId

사용 사례

랜딩 페이지 섹션

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

페이지 전환

부드러운 페이지 간 전환 효과

콘텐츠 섹션

스크롤 시 콘텐츠 블록 순차 등장

히어로 섹션

페이지 진입 시 히어로 영역 애니메이션

useStagger usePageMotions