James Ward
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by James Ward
-
-
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!
useGSAP scoped animations aren't contained to scope
in GSAP
Posted
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