useScrollToggle

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const toggle = useScrollToggle({
  hideOpacity: 0,
  hideTranslateY: 20,
  scrollThreshold: 0.1,
});

return (
  <div ref={toggle.ref} style={toggle.style}>
    Appears when scrolled into view
  </div>
);

0px

Header


showOpacity	number	1	Opacity when element is visible
hideOpacity	number	0	Opacity when element is hidden
showScale	number	1	Scale when visible
hideScale	number	0.8	Scale when hidden
showTranslateY	number	0	TranslateY when visible (px)
showRotate	number	0	Rotation when visible (degrees)
showTranslateX	number	0	TranslateX when visible (px)
hideTranslateY	number	20	TranslateY when hidden (px)
hideRotate	number	0	Rotation when hidden (degrees)
hideTranslateX	number	0	TranslateX when hidden (px)
scrollThreshold	number	0.1	Scroll position threshold (0-1, percentage from top)
scrollDirection	"up" \| "down" \| "both"	"both"	Which scroll direction triggers the toggle
duration	number	300	Transition duration in milliseconds
easing	string	"ease-out"	CSS easing function
onComplete	() => void	-	Callback when transition completes
onStart	() => void	-	Callback when transition starts
onStop	() => void	-	Callback when transition is stopped
onReset	() => void	-	Callback when state is reset


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Animated style (transform + opacity)
isVisible	boolean	Whether element is in visible state
isAnimating	boolean	Whether transitioning between states
progress	number	Transition progress (0-1)
start	() => void	Manually trigger show
stop	() => void	Stop transition
reset	() => void	Reset to hidden state
pause	() => void	Pause transition
resume	() => void	Resume paused transition

useScrollReveal useScrollDirectionPro