useSlide

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

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

// useSlide is an alias — use direction-specific hooks:
const slideUp = useSlideUp({ duration: 700, distance: 50 });

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
direction	"up" \| "down" \| "left" \| "right"	"up"	Slide direction
distance	number	50	Slide distance in pixels
threshold	number	0.1	Viewport intersection threshold (0-1)
triggerOnce	boolean	true	Only trigger once
easing	string	"ease-out"	Easing function
autoStart	boolean	true	Auto start on viewport entry


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Animated style (transform + 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

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

const up = useSlideUp({ distance: 50 });
const left = useSlideLeft({ distance: 50 });
const right = useSlideRight({ distance: 50 });

return (
  <>
    <div ref={up.ref} style={up.style}>Slide Up</div>
    <div ref={left.ref} style={left.style}>Slide Left</div>
    <div ref={right.ref} style={right.style}>Slide Right</div>
  </>
);

useFadeIn useSlideUp