I want to widen an image on scroll by using gsap , but I am using React I didn't know how to implement it , and didn't successfully manage to do it , any idea how to fix this ?
I have tried something like this , but didn't work either :
<ArticleWrapper ref={ref}>
<img id='grow' className='image' src={Img} alt='Image' />
</ArticleWrapper>
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
}
);
}, []);