@hua-labs/motion-core

v2.1.0-alpha.3

Animation

Hooks

React 개발자를 위한 필수 애니메이션 훅. Framer Motion 없이도 부드러운 애니메이션을 구현합니다.

$npm install @hua-labs/motion-core

제공 Hooks

useUnifiedMotion

통합 모션 훅 - 모든 애니메이션 타입 지원

usePageTransition

페이지 전환 애니메이션

useElementTransition

요소 단위 전환 애니메이션

useFadeAnimation

페이드 인/아웃 애니메이션

useSlideAnimation

슬라이드 애니메이션

useScrollAnimation

스크롤 기반 애니메이션

useSpringAnimation

스프링 물리 애니메이션

useGestureAnimation

제스처 기반 애니메이션

애니메이션 타입

fadeIn

페이드 인

fadeOut

페이드 아웃

slideUp

아래에서 위로 슬라이드

slideDown

위에서 아래로 슬라이드

slideLeft

오른쪽에서 왼쪽으로 슬라이드

slideRight

왼쪽에서 오른쪽으로 슬라이드

scale

스케일 애니메이션

bounce

바운스 효과

빠른 시작

1. 기본 사용법

tsx

import { useUnifiedMotion } from '@hua-labs/motion-core';

function MyComponent() {
  const motion = useUnifiedMotion({
    type: 'fadeIn',
    duration: 500,
    delay: 100,
  });

  return (
    <div ref={motion.ref} style={motion.style}>
      <h1>Hello, Motion!</h1>
    </div>
  );
}

2. 페이지 전환

tsx

import { usePageTransition } from '@hua-labs/motion-core';

function Page() {
  const transition = usePageTransition({
    type: 'slideUp',
    duration: 400,
  });

  return (
    <div ref={transition.ref} style={transition.style}>
      <main>Page Content</main>
    </div>
  );
}

3. 스크롤 애니메이션

tsx

import { useScrollAnimation } from '@hua-labs/motion-core';

function ScrollSection() {
  const scroll = useScrollAnimation({
    threshold: 0.2, // 20% 보일 때 트리거
    triggerOnce: true,
  });

  return (
    <section ref={scroll.ref} style={scroll.style}>
      {scroll.isInView && <p>Now visible!</p>}
    </section>
  );
}

4. 제어된 애니메이션

tsx

import { useUnifiedMotion } from '@hua-labs/motion-core';

function ControlledComponent() {
  const motion = useUnifiedMotion({
    type: 'scale',
    duration: 300,
    autoStart: false, // 자동 시작 비활성화
  });

  return (
    <>
      <button onClick={() => motion.start()}>Start</button>
      <button onClick={() => motion.reset()}>Reset</button>
      <div ref={motion.ref} style={motion.style}>
        Animated Element
      </div>
    </>
  );
}

API Reference

useUnifiedMotion(options)

Option	Type	Default	설명
type	EntranceType	'fadeIn'	애니메이션 타입
duration	number	300	애니메이션 지속 시간 (ms)
delay	number	0	시작 지연 시간 (ms)
autoStart	boolean	true	자동 시작 여부
easing	string	'ease-out'	이징 함수

반환값

Property	Type	설명
ref	RefObject	요소에 연결할 ref
style	CSSProperties	애니메이션 스타일
start()	function	애니메이션 시작
reset()	function	애니메이션 초기화
isAnimating	boolean	애니메이션 진행 중 여부