James Ward

Hi Rodrigo, In the stackblitz demo I can't import useGSAP from gsap-trial (not found), however making sure I register useGSAP seems to fix the demo. However I still can't get things working right in my website code even with the paid gsap package. I will see if I can reproduce whatever is happening in stackblitz but thank you for your help with the demo

Is it recommended practice to instead put all my common animations for images, text intros in a single component and wrap every page in it? e.g. <MyGSAPAnimations> <PageOne/> </MyGSAPAnimations> <MyGSAPAnimations> <PageTwo/> </MyGSAPAnimations>

Hello, Demo here: https://stackblitz.com/edit/stackblitz-starters-snsg6l?file=app%2Fpage.tsx I might be using useGSAP incorrectly and trying to use it in reusable child components when it wasn't designed that way however after reading the documentation around scope I'm confused why animations are selecting everything, not just elements within the ref scope For my website I am trying to create images that scale on scrollTrigger. As I want to use the same animation across every image on the website (and there are hundreds) I am placing the useGSAP hook in the child component for the image rather than in the parent page component so I can simply use the component wherever I want to and it will be rendered with the animation. I eventually want to do the same with text animations as well However I am finding that when I do this even with a scoped useGSAP in the <Image /> component, if I animate by a scoped selector e.g. ".img" it will animate every ".img" on the page, not just the one contained to the scope. This results in every image animation being triggered at once rather than just the image that was triggered on scroll Is this just a React thing and I should be doing all animating from the parent page? Just feels like a bit of an anti-pattern in the React world of reusable components Thanks very much for any help!