Estoy tratando de implicar algunas animaciones en una imagen mientras me desplazo, la imagen crecerá mientras se desplaza hacia abajo y volverá a la normalidad cuando se desplace hacia arriba. La referencia: codepen . Este es mi código de reacción:

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

Intenté implementar esto pero no funcionó cuando me desplacé:

 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 } ); }, []);

Alguna idea de cómo hacerlo ?