Files
HRM-System/resources/js/hooks/useScrollAnimation.ts
2026-04-13 08:16:56 +08:00

26 lines
605 B
TypeScript
Executable File

import { useEffect, useRef, useState } from 'react';
export function useScrollAnimation(threshold = 0.1) {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
},
{ threshold }
);
if (ref.current) {
observer.observe(ref.current);
}
return () => observer.disconnect();
}, [threshold]);
return { ref, isVisible };
}