Skip to content
Docs
훅으로 돌아가기

useFadeIn

@hua-labs/hua/motion

스크롤 뷰포트 진입 시 부드러운 페이드인 애니메이션

설치

bash
npm install @hua-labs/hua
Import
tsx
import { useFadeIn } from "@hua-labs/hua/framework";

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

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

기본 사용법

tsx
const fadeIn = useFadeIn({ duration: 700, delay: 100 });

return (
  <div ref={fadeIn.ref} style={fadeIn.style}>
    This content fades in when scrolled into view
  </div>
);

라이브 데모

스태거 페이드인 데모

01
delay: 0ms
02
delay: 200ms
03
delay: 400ms

API 레퍼런스

옵션

이름타입기본값설명
durationnumber700docs:hooks.use-fade-in.options.duration
delaynumber0docs:hooks.use-fade-in.options.delay
thresholdnumber0.1docs:hooks.use-fade-in.options.threshold
triggerOncebooleantruedocs:hooks.use-fade-in.options.triggerOnce
easingstring"ease-out"docs:hooks.use-fade-in.options.easing
autoStartbooleantruedocs:hooks.use-fade-in.options.autoStart
initialOpacitynumber0docs:hooks.use-fade-in.options.initialOpacity
targetOpacitynumber1docs:hooks.use-fade-in.options.targetOpacity
onComplete() => void-docs:hooks.use-fade-in.options.onComplete
onStart() => void-docs:hooks.use-fade-in.options.onStart
onStop() => void-docs:hooks.use-fade-in.options.onStop
onReset() => void-docs:hooks.use-fade-in.options.onReset

반환값

이름타입설명
refRefObject<T | null>docs:hooks.use-fade-in.returns.ref
styleCSSPropertiesdocs:hooks.use-fade-in.returns.style
isVisiblebooleandocs:hooks.use-fade-in.returns.isVisible
isAnimatingbooleandocs:hooks.use-fade-in.returns.isAnimating
progressnumberdocs:hooks.use-fade-in.returns.progress
start() => voiddocs:hooks.use-fade-in.returns.start
stop() => voiddocs:hooks.use-fade-in.returns.stop
reset() => voiddocs:hooks.use-fade-in.returns.reset

콜백 함수

tsx
const fadeIn = useFadeIn({
  duration: 700,
  onStart: () => console.log('Animation started'),
  onComplete: () => console.log('Animation complete'),
  onStop: () => console.log('Animation stopped'),
  onReset: () => console.log('Animation reset'),
});

사용 사례

랜딩 페이지 섹션

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

카드 리스트

카드 그리드 스태거 애니메이션

히어로 섹션

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

이미지 갤러리

갤러리 이미지 호버 및 전환