Fade in animation not working properly

[Schokiii93]

Hi guys,

I'm trying to implement a fade in animation with framer motion for my new homepage. The problem is that the element fades in when I scroll down but it disappears when I scroll down a bit more. This leads to some weird looking artifacts when I scroll up again. I just want the element to be shown forever as long as the user scrolls down the page. Only if the user scrolls up again the element should fade out again.

This is my code:

import { useEffect, useRef, useState } from "react";
import { useAnimation, motion } from "framer-motion";`

interface ScrollAnimationProps {
  children: React.ReactNode;
}

export default function FadeInFromLeft({ children }: ScrollAnimationProps) {
  const controls = useAnimation();
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (ref.current) {
        const windowHeight = window.innerHeight;
        const elementTop = ref.current.getBoundingClientRect().top;
        const elementBottom = ref.current.getBoundingClientRect().bottom;
        // Adjust these values as needed to control when the animation should start
        const triggerOffsetTop = windowHeight * 0.5;
        const triggerOffsetBottom = windowHeight * 0.2;
        if (
          elementTop - triggerOffsetTop < 0 &&
          elementBottom - triggerOffsetBottom > 0
        ) {
          setIsVisible(true);
        } else {
          setIsVisible(false);
        }
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  useEffect(() => {
    if (isVisible) {
      controls.start({
        x: 0,
        opacity: 1,
        transition: { duration: 1.3, delay: 0.5 },
      });
    } else {
      controls.start({ x: -100, opacity: 0, transition: { duration: 1.3 } });
    }
  }, [isVisible, controls]);
  return (
    <motion.div ref={ref}>
      <motion.div initial={{ x: -100, opacity: 0 }} animate={controls}>
        {children}
      </motion.div>
    </motion.div>
  );
}`