useMotion

@hua-labs/hua/motion

통합 애니메이션 훅 — 페이드, 슬라이드, 스케일, 바운스 등 모든 모션을 하나로

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const motion = useMotion({
  type: 'fadeIn',
  duration: 600,
  autoStart: true,
});

return (
  <div ref={motion.ref} style={motion.style}>
    Fade in on viewport enter
  </div>
);

라이브 데모

애니메이션 타입

fadeIn

Fade

slideUp

Slide

scaleIn

Scale

bounceIn

Bounce

API 레퍼런스

옵션

이름	타입	기본값	설명
type	EntranceType	-	docs:hooks.use-motion.options.type
duration	number	600	docs:hooks.use-motion.options.duration
autoStart	boolean	true	docs:hooks.use-motion.options.autoStart
delay	number	0	docs:hooks.use-motion.options.delay
easing	string	"ease-out"	docs:hooks.use-motion.options.easing
threshold	number	0.1	docs:hooks.use-motion.options.threshold
triggerOnce	boolean	true	docs:hooks.use-motion.options.triggerOnce
distance	number	50	docs:hooks.use-motion.options.distance
onComplete	() => void	-	docs:hooks.use-motion.options.onComplete
onStart	() => void	-	docs:hooks.use-motion.options.onStart
onStop	() => void	-	docs:hooks.use-motion.options.onStop
onReset	() => void	-	docs:hooks.use-motion.options.onReset

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-motion.returns.ref
style	CSSProperties	docs:hooks.use-motion.returns.style
isVisible	boolean	docs:hooks.use-motion.returns.isVisible
isAnimating	boolean	docs:hooks.use-motion.returns.isAnimating
progress	number	docs:hooks.use-motion.returns.progress
start	() => void	docs:hooks.use-motion.returns.start
stop	() => void	docs:hooks.use-motion.returns.stop
reset	() => void	docs:hooks.use-motion.returns.reset

사용 사례

페이지 전환

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

로딩 상태

데이터 로딩 중 시각적 피드백

모달 애니메이션

모달 열기/닫기 전환 효과

인터랙티브 요소

사용자 상호작용 기반 동적 효과

고급 사용법

tsx

// Bounce in with custom distance
const motion = useMotion({
  type: 'bounceIn',
  duration: 800,
  distance: 100,
  threshold: 0.2,
  triggerOnce: false,
  onComplete: () => console.log('Animation done!'),
});

return (
  <>
    <button onClick={motion.start}>Replay</button>
    <button onClick={motion.reset}>Reset</button>
    <div ref={motion.ref} style={motion.style}>
      Bounce!
    </div>
  </>
);

useFadeIn