Function useAnimation

pwa/hooks/con/useAnimation.tsx:65–94

(
  direction = "right",
  duration = 1,
  animationValue,
  delay = 0,
  rootMargin = "-10%"
)

  delay?: number,
  rootMargin?: string
) => React.RefObject<HTMLDivElement> = (
  direction = "right",
  duration = 1,
  animationValue,
  delay = 0,
  rootMargin = "-10%"
) => {
  const ref = useRef(null);
  const [isMobile, setIsMobile] = useState(false);
  const intersection = useIntersection(ref, {
    root: null,
    rootMargin,
  });

  useEffect(() => {
    if (typeof window !== undefined) {
      setIsMobile("ontouchstart" in document.documentElement);
    }
  }, [setIsMobile]);
  if (isMobile) return ref; // no animation on mobile device
  if (
    intersection &&
    ref.current &&
    ("bottom" !== direction || 0 < intersection.boundingClientRect.y) // avoid intersection box issue
  ) {
    if (intersection.isIntersecting) fadeIn(ref.current, duration, delay);
    else fadeOut(ref.current, direction, duration, animationValue);
  }
  return ref;
};

export default useAnimation;