useFadeIn

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

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>
);

delay: 0ms

delay: 200ms

delay: 400ms


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 when element enters viewport
initialOpacity	number	0	Initial opacity value
targetOpacity	number	1	Target opacity value
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 animated element
style	CSSProperties	Animated opacity style
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

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'),
});

useMotion useSlideDeprecated