Animation Problem

 export const CaseStudy = withVisualEditor<CaseStudyProps & MotionProps>(
  ({ partnerImg, title, categories, ctaLabel, ctaLink, studyImg, ...props }) => {
    const controls = useAnimation();
    const [scrolling, setScrolling] = useState(false);

    const containerRef = useRef<HTMLDivElement | null>(null);

    const calculateScrollEffect = () => {
      if (!containerRef.current) return { opacity: 1, y: 0, height: "100vh" };

      const articleTop = containerRef.current.getBoundingClientRect().top;
      const viewportHeight = window.innerHeight;

      // Calculate the scroll percentage based on the position of the div
      const scrollPercentage = Math.min(1, Math.max(0, (viewportHeight - 200 - articleTop) / (viewportHeight - 200)));

      // Calculate the height based on scroll percentage (from 40px to 100% of content height)
      const contentHeight = containerRef.current.scrollHeight;
      const height = `calc(40px + ${scrollPercentage * (contentHeight - 40)}px)`;

      // const y = `calc(100vh - ${height})`;
      const y = -100;

      return { y };
    };

    const updateAnimations = () => {
      const { y } = calculateScrollEffect();
      controls.start({ y });
    };

    const handleScroll = () => {
      setScrolling(true);

      if (!scrolling) {
        updateAnimations();
      }

      setTimeout(() => {
        setScrolling(false);
      }, 100);
    };

    useEffect(() => {
      window.addEventListener("scroll", handleScroll, { passive: true });

      return () => {
        window.removeEventListener("scroll", handleScroll);
      };
    }, [controls, scrolling]);

    return ( ....

 export const CaseStudy = withVisualEditor<CaseStudyProps & MotionProps>(
  ({ partnerImg, title, categories, ctaLabel, ctaLink, studyImg, ...props }) => {
    const controls = useAnimation();
    const [scrolling, setScrolling] = useState(false);

    const containerRef = useRef<HTMLDivElement | null>(null);

    const calculateScrollEffect = () => {
      if (!containerRef.current) return { opacity: 1, y: 0, height: "100vh" };

      const articleTop = containerRef.current.getBoundingClientRect().top;
      const viewportHeight = window.innerHeight;

      // Calculate the scroll percentage based on the position of the div
      const scrollPercentage = Math.min(1, Math.max(0, (viewportHeight - 200 - articleTop) / (viewportHeight - 200)));

      // Calculate the height based on scroll percentage (from 40px to 100% of content height)
      const contentHeight = containerRef.current.scrollHeight;
      const height = `calc(40px + ${scrollPercentage * (contentHeight - 40)}px)`;

      // const y = `calc(100vh - ${height})`;
      const y = -100;

      return { y };
    };

    const updateAnimations = () => {
      const { y } = calculateScrollEffect();
      controls.start({ y });
    };

    const handleScroll = () => {
      setScrolling(true);

      if (!scrolling) {
        updateAnimations();
      }

      setTimeout(() => {
        setScrolling(false);
      }, 100);
    };

    useEffect(() => {
      window.addEventListener("scroll", handleScroll, { passive: true });

      return () => {
        window.removeEventListener("scroll", handleScroll);
      };
    }, [controls, scrolling]);

    return ( ....