useSlide

@hua-labs/hua/motion

상하좌우 방향별 슬라이드 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

import { useSlideUp } from "@hua-labs/motion-core";

// useSlide is an alias — use direction-specific hooks:
const slideUp = useSlideUp({ duration: 700, distance: 50 });

return (
  <div ref={slideUp.ref} style={slideUp.style}>
    Content slides up into view
  </div>
);

라이브 데모

스태거 슬라이드 데모

0ms

150ms

300ms

450ms

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	700	docs:hooks.use-slide.options.duration
delay	number	0	docs:hooks.use-slide.options.delay
direction	"up" \| "down" \| "left" \| "right"	"up"	docs:hooks.use-slide.options.direction
distance	number	50	docs:hooks.use-slide.options.distance
threshold	number	0.1	docs:hooks.use-slide.options.threshold
triggerOnce	boolean	true	docs:hooks.use-slide.options.triggerOnce
easing	string	"ease-out"	docs:hooks.use-slide.options.easing
autoStart	boolean	true	docs:hooks.use-slide.options.autoStart

반환값

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

방향별 예시

tsx

import { useSlideLeft, useSlideRight } from "@hua-labs/hua/framework";
import { useSlideUp } from "@hua-labs/motion-core";

const up = useSlideUp({ distance: 50 });
const left = useSlideLeft({ distance: 50 });
const right = useSlideRight({ distance: 50 });

return (
  <>
    <div ref={up.ref} style={up.style}>Slide Up</div>
    <div ref={left.ref} style={left.style}>Slide Left</div>
    <div ref={right.ref} style={right.style}>Slide Right</div>
  </>
);

사용 사례

리스트 아이템

리스트 항목 순차 등장

기능 카드

기능 소개 카드 애니메이션

내비게이션 메뉴

메뉴 항목 호버/선택 애니메이션

알림

알림 배지 및 팝업 애니메이션

useFadeIn useSlideUp