useScaleIn

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

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


initialScale	number	0	Initial scale value
targetScale	number	1	Target scale value
duration	number	700	Animation duration in milliseconds
delay	number	0	Delay before animation starts
threshold	number	0.1	Viewport intersection threshold (0-1)
triggerOnce	boolean	true	Only trigger animation once
easing	string	"ease-out"	CSS easing function
autoStart	boolean	true	Auto start on viewport entry
onComplete	() => void	-	Callback when animation completes
onStart	() => void	-	Callback when animation starts
onStop	() => void	-	Callback when animation is stopped
onReset	() => void	-	Callback when animation is reset


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Style with transform: scale() and opacity
isVisible	boolean	Whether element is in viewport
isAnimating	boolean	Whether animation is in progress
progress	number	Animation progress (0-1)
start	() => void	Start animation
stop	() => void	Stop animation
reset	() => void	Reset to initial state

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