JAVASCRIPT

useScroll hooks

import { useInView } from 'react-intersection-observer';
import { useAnimation } from 'framer-motion';

export const useScroll = (thresh = 0.3) => {
  const controls = useAnimation();
  const { ref, inView } = useInView({ threshold: thresh });

  if (inView) {
    controls.start('show');
  } else {
    controls.start('hidden');
  }

  return { ref, controls };
};


//Video.tsx
import { useScroll } from '../../hooks/useScroll';
import { fade, titleAnim } from '../../../utils/animation';
const Video = () => {
  const { width } = useWindowSize();
  const videoRef = useRef<any>();
   const { ref, controls } = useScroll();
  return (
    <VideoSection
      transition={{ duration: 0.75 }}
      ref={ref}
      variants={reveal}
      animate={controls}
      initial="hidden"
      className="section-wrapper"
      width={width}
      style={{ marginTop: '-20px' }}
    >

useScroll

import { useState } from "react";

export const useScroll = () => {

  const [scrollPosition, setScrollPosition] = useState(0);

  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
  };
  window.addEventListener("scroll", handleScroll);

  return {scrollPosition};
};