useSlideUp

@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

const slideUp = useSlideUp({ duration: 700, delay: 100 });

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-up.options.duration
delay	number	0	docs:hooks.use-slide-up.options.delay
distance	number	50	docs:hooks.use-slide-up.options.distance
direction	"up" \| "down" \| "left" \| "right"	"up"	docs:hooks.use-slide-up.options.direction
threshold	number	0.1	docs:hooks.use-slide-up.options.threshold
triggerOnce	boolean	true	docs:hooks.use-slide-up.options.triggerOnce
easing	string	"ease-out"	docs:hooks.use-slide-up.options.easing
autoStart	boolean	true	docs:hooks.use-slide-up.options.autoStart
onComplete	() => void	-	docs:hooks.use-slide-up.options.onComplete
onStart	() => void	-	docs:hooks.use-slide-up.options.onStart
onStop	() => void	-	docs:hooks.use-slide-up.options.onStop
onReset	() => void	-	docs:hooks.use-slide-up.options.onReset

반환값

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

방향별 예시

tsx

const slide1 = useSlideUp({ delay: 0 });
const slide2 = useSlideUp({ delay: 100 });
const slide3 = useSlideUp({ delay: 200 });

return (
  <>
    <div ref={slide1.ref} style={slide1.style}>First</div>
    <div ref={slide2.ref} style={slide2.style}>Second</div>
    <div ref={slide3.ref} style={slide3.style}>Third</div>
  </>
);

사용 사례

리스트 아이템

리스트 항목 순차 등장

기능 카드

기능 소개 카드 애니메이션

히어로 섹션

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

콘텐츠 섹션

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

useSlideDeprecated useSlideLeft