I want to make a fade-in animation effect using javaScript scroll event. What should I do?

The current style is working on style components. Please advise

const handleAnimation = ( ) => {
    const windowHeight = window.innerHeight;
    const scrollY = window.scrollY;
    const bannerTop = ref.current && ref.current.getBoundingClientRect().top;
    const bannerAbsolute = scrollY + bannerTop;

   return { windowHeight: windowHeight, scrollY: scrollY };
}

 useEffect(() => {
    window.addEventListener('scroll', handleAnimationScroll);

    return () => {
      window.removeEventListener('scroll', handleAnimationScroll);
    };
  }, []);
  handleAnimationScroll();