I am trying to imply some animations in an image while scrolling , the image will grow while scrolling down and return to normal when scrolling up . The reference : codepen. This is my react code :

 <ArticleWrapper ref={ref}>
        <img id='grow' className='image' src={Img} alt='Image' />
</ArticleWrapper>

I have tried to implement this but it didnt work when I scroll :

  const ref = useRef(null);
 useEffect(() => {
    const element = ref.current;
    scrollTrigger: {
    trigger: "#grow",
    scrub: 1.5,
    start: "top center",
    end: "+=400",
    ease: "power1.out"
  },
      {
       duration: 1,
  scale: 1
      }
    );
  }, []);

Any idea how to do that ?