useScaleIn

@hua-labs/hua/motion

스케일 확대 애니메이션으로 등장

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const scaleIn = useScaleIn({ duration: 700, delay: 100 });

return (
  <div ref={scaleIn.ref} style={scaleIn.style}>
    Content scales in when visible
  </div>
);

라이브 데모

스케일 변형 데모

0 → 1

scale: 0

0.5 → 1

scale: 0.5

0.8 → 1

scale: 0.8

API 레퍼런스

옵션

이름	타입	기본값	설명
initialScale	number	0	docs:hooks.use-scale-in.options.initialScale
targetScale	number	1	docs:hooks.use-scale-in.options.targetScale
duration	number	700	docs:hooks.use-scale-in.options.duration
delay	number	0	docs:hooks.use-scale-in.options.delay
threshold	number	0.1	docs:hooks.use-scale-in.options.threshold
triggerOnce	boolean	true	docs:hooks.use-scale-in.options.triggerOnce
easing	string	"ease-out"	docs:hooks.use-scale-in.options.easing
autoStart	boolean	true	docs:hooks.use-scale-in.options.autoStart
onComplete	() => void	-	docs:hooks.use-scale-in.options.onComplete
onStart	() => void	-	docs:hooks.use-scale-in.options.onStart
onStop	() => void	-	docs:hooks.use-scale-in.options.onStop
onReset	() => void	-	docs:hooks.use-scale-in.options.onReset

반환값

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

커스텀 스케일

tsx

// Start from half size
const scaleIn = useScaleIn({
  initialScale: 0.5,
  duration: 500,
  easing: "ease-in-out",
});

// Start from zero (dramatic effect)
const popIn = useScaleIn({
  initialScale: 0,
  targetScale: 1,
  duration: 300,
});

사용 사례

모달

모달 열기/닫기 애니메이션

카드

카드 컴포넌트 호버 및 클릭 효과

이미지 갤러리

갤러리 이미지 호버 및 전환

버튼

버튼 호버 및 클릭 피드백 효과

useSlideDown useBounceIn