useToggleMotion

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const { ref, style, isVisible, toggle } = useToggleMotion();

return (
  <>
    <button onClick={toggle}>Toggle</button>
    <div ref={ref} style={style}>
      {isVisible ? 'Visible content' : 'Hidden'}
    </div>
  </>
);


duration	number	300	Animation duration in milliseconds
delay	number	0	Delay before animation starts
easing	string	"ease-in-out"	CSS easing function


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Declarative animated style (opacity, translateY, scale, transition)
isVisible	boolean	Current visibility state
isAnimating	boolean	Whether animation is in progress
progress	number	Animation progress (0 or 1)
toggle	() => void	Toggle between show/hide
show	() => void	Show the element (translateY + scale in)
hide	() => void	Hide the element (translateY + scale out)
start	() => void	Start the show animation
stop	() => void	Stop current animation
reset	() => void	Reset to initial hidden state

useGestureMotion useClickToggle