useSlideUp

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const slideUp = useSlideUp({ duration: 700, delay: 100 });

return (
  <div ref={slideUp.ref} style={slideUp.style}>
    Content slides up into view
  </div>
);

0ms

150ms

300ms

450ms


duration	number	700	Animation duration in milliseconds
delay	number	0	Delay before animation starts
distance	number	50	Distance to slide in pixels
direction	"up" \| "down" \| "left" \| "right"	"up"	Slide direction
threshold	number	0.1	Viewport threshold
triggerOnce	boolean	true	Only trigger once
easing	string	"ease-out"	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>	Ref to attach to element
style	CSSProperties	Style object
isVisible	boolean	Visibility state
isAnimating	boolean	Animation state
progress	number	Animation progress (0-1)
start	() => void	Start animation
stop	() => void	Stop animation
reset	() => void	Reset state

tsx

const slide1 = useSlideUp({ delay: 0 });
const slide2 = useSlideUp({ delay: 100 });
const slide3 = useSlideUp({ delay: 200 });

return (
  <>
    <div ref={slide1.ref} style={slide1.style}>First</div>
    <div ref={slide2.ref} style={slide2.style}>Second</div>
    <div ref={slide3.ref} style={slide3.style}>Third</div>
  </>
);

useSlideDeprecated useSlideLeft