useGSAP scoped animations aren't contained to scope

[James Ward]

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!

[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>

 

[Rodrigo]

Hi,

 

The specific issue here stems from the fact that you're using the GSAP Trial package. The short explanation is that the useGSAP hook uses the regular GSAP import, like this:

import gsap from "gsap";

But the rest of your app is using the GSAP core files from the gsap-trial package which is a completely different object (the code is basically the same but it comes from different files, hence a different object), so the scope is not being used because is added to a different GSAP core object.

 

The solution is to register the useGSAP hook using the import from the gsap-trial package so it uses the same GSAP core than the rest of the plugins:

gsap.registerPlugin(ScrollTrigger, useGSAP);

That should fix the problem.

 

Happy Tweening!

[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