useScrollReveal

@hua-labs/hua/motion

스크롤 시 요소를 순차적으로 등장시키는 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

tsx

const reveal = useScrollReveal({ threshold: 0.2 });

return (
  <div ref={reveal.ref} style={reveal.style}>
    Content reveals on scroll
  </div>
);

fadeIn

페이드인 효과

slideUp

아래에서 슬라이드

slideLeft

왼쪽에서 슬라이드

scaleIn

스케일인 효과

이름	타입	기본값	설명
threshold	number	0.1	docs:hooks.use-scroll-reveal.options.threshold
rootMargin	string	"0px"	docs:hooks.use-scroll-reveal.options.rootMargin
triggerOnce	boolean	true	docs:hooks.use-scroll-reveal.options.triggerOnce
duration	number	700	docs:hooks.use-scroll-reveal.options.duration
motionType	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	"fadeIn"	docs:hooks.use-scroll-reveal.options.motionType
delay	number	0	docs:hooks.use-scroll-reveal.options.delay
easing	string	"ease-out"	docs:hooks.use-scroll-reveal.options.easing
onComplete	() => void	-	docs:hooks.use-scroll-reveal.options.onComplete
onStart	() => void	-	docs:hooks.use-scroll-reveal.options.onStart
onStop	() => void	-	docs:hooks.use-scroll-reveal.options.onStop
onReset	() => void	-	docs:hooks.use-scroll-reveal.options.onReset

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

tsx

const reveal = useScrollReveal({
  motionType: "slideUp",
  delay: 200,
  easing: "ease-in-out",
});

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

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

갤러리 이미지 호버 및 전환

뷰포트 진입 시 콘텐츠 로드